برمجة تطبيقات الجوال 





المهندس فيصل الاسود 
باحث اكاديمي في جامعة 9۸۷ الدولية للعلوم والتكنولوجيا 





الاهداء 


الى ابي وامي الذين كانا معي في مسيرتي العلمية والى زوجني التي تحملت مني كل ذلك 
الانشغال » الى اخوتي رفاق دربي اهدي لكم هذا العمل المتواضع. 


انالا املك الحقيقة أنا مثلكم أحاول اللحاق بها الى كل من يشاركني ذلك اهدي اليه هذا الكتاب. 


يمكنك الحصول على شرح لكامل محتويات الكتاب على قناة ال 66ل أناه/ا 


٠١ 
> StackOverFlow Arabi 





مقدمة الكتاب 
أصبحت تطبيقات الجوال جزءا من حياتنا اليومية مما أتاح لنا كبشر تأهيل كوادر لتلبية هذا الجزء 
المهم من الحياة والتفرد بأعمال برمجية خاصة بعلم برمجة التطبيقات ,سيمكنك هذا الكتاب ان 
شاء الله من دخول عالم برمجة التطبيقات من أوسع ابوابه . كما سيعطيك القوة لكي تتأهل للعمل 
في اقوى الشركات او حتى الربح من التطبيقات بشكل مستقل. 
لغة دارت هي لغة برمجية تم إنشاؤها من قبل شركة جوجل وتستخدم في تطبيقات الويب أو سطح 
المكتب وتطبيقات الجوال. 
تم ابتكار هذه اللغة من ãقبJ Lars Bak‏ و “û Kasper Lund‏ إطلاق أول اصدار منها في عام ۲۰۱۱. 
من المهم أن نعلم أت 1031 هي لغة 1055-112110110) أي أنها تعمل على مختلف المنصات,؛ كما 
انها 122811286 71201976 أي تتعامل مع العتاد مباشرة بدون مفسرات وسيطة وهذا يعطيها سرعة 
عالية جدا. 
أما فلاتر ۴1٤٤۲‏ فهي منصة تمكننا من بناء تطبيقات جوال بواجهات رسومية معتمدين على لغة 
.Dart‏ 
الذي يميز ۴1)٥۲‏ آنها تمكننا من بناء تطبيقات لأنظمة مختلفة منها الاندرويد أوال 105 الخاص 
بأجهزة 16مم4 والمذهل أكثر أنه يمكن أيضا استخدامها كاللغة الأولى لبرمجة تطبيقات نظام 
جوجل الجديد "فوشيا" 11201513 والذي قد يزيح الاندرويد عن مكانه. 
يجب أن نعلم أيضا أن 11 تعتمد في تصميميها 1065180 112161131 التي تم بناؤؤها من قبل 


يمكنك الحصول على شرح لكامل محتويات الكتاب على قناة ال 66ل أناه/ا 


٠١ 
> StackOverFlow Arabi 





حول الوولف 


السلام عليكم انا فيصل الاسود مهندس برمجيات وباحث 
في جامعة 51881 الدولية للعلوم والتكنولوجيا في هذا 
المجال ادرس الدكتوراه مرورا بالماستر واسخر جزءا كبيرا من 
حياتي لأكون جسرا لإفادة الشغوفين مثلي يمكنك 
الحصول على شروحات كامل الكتب التي اقدمها عن 
طريق قناتي على اليوتيوب ؛ وأحي سعيك وراء العلم. 





يمكنك الحصول على شرح لكامل محتويات الكتاب على قناة ال 66ل أناه/ا 


2 
= StackOverFlow Arabi 





المحتويات 
الوحدة الاولى: المودخل الى لغةّ دارت 
الوحدة الثانيةة: اساسيات لغة دارت 
الوحدة التالنة: البروجةم المتقدمة في دارت 
الوحدة الرابعہ: برمجۂ التطبيقات باستخدام فلائر 

التعرف على بيئة فلات 

أنظمة التصميم 1,2701015 

ال أءع17108 المقدمة مع 1عأأن!"1 

القوالب الجاهزة 50211010 

التصفح والتوجيه 125715216100 

التعامل مع 1501 

استدامة البيانات 

التعامل مع الصور 

الاشعارات الداخلية 


E 
L1 
5-8 
ا‎ 


همر | لكا 
ك1 | |هكه 
ده 2 o‏ 


کڪ 
ےا 
دا 


الحركة 4111126101 

رسائل التنبيه السريعة 10251 

قواعد البيانات ع025ع1"11 

الوحدة الخامسة: النشر والربجح من التطبيقات 
إضافة إعلانات Admob‏ 

ا ا 


المراجع 





يمكنك الحصول على شرح لكامل محتويات الكتاب على قناة ال طدا أله 


2 
= StackOverFlow Arabi 





يمكنك الحصول على شرح لكامل محتويات الكتاب على قناة ال 66ل أناه/ا 


لد 
StackOverFlow Arabi‏ = 





الودخل الى لعة دارت 


Introduction to Dart Language 


SUCCESS ذا‎ 4 LOUSY TEACHER .I1 SEDUCES SMARI PEOPLE 
INTO THINKING THEY CAN'T LOSE 


Bill Gates 








الودخل الى لغمةّ دارت 
1 - مقدمة: 


لغة دارت هي لغة برمجية تم إنشاؤها من قبل شركة جوجل وتستخدم في تطبيقات الويب أو سطح 
المكتب وتطبيقات الجوال. 

تم ابتكار هذه اللغة من ãقبJ Lars Bak‏ و “û Kasper Lund‏ إطلاق أول اصدار منها في عام ۲۰۱۱. 
من المهم أ نعلم أن 10351 هي لغة 1055-112110110) أي أنها تعمل على مختلف المنصات,؛ كما 
انها 122811286 7121976 أي تتعامل مع العتاد مباشرة بدون مفسرات وسيطة وهذا يعطيها سرعة 
عالية جدا. 

أما فلاتر ۴1٤٤۲‏ فهي منصة تمكننا من بناء تطبيقات جوال بواجهات رسومية معتمدين على لغة 
.Dart‏ 

الذي يميز ۴10٥۲‏ آنها تمكننا من بناء تطبيقات لأنظمة مختلفة منها الاندرويد أوال 105 الخاص 
بأجهزة 16مم4 والمذهل أكثر أنه يمكن أيضا استخدامها كاللغة الأولى لبرمجة تطبيقات نظام 
جوجل الجديد "فوشيا" 11201513 والذي قد يزيح الاندرويد عن مكانه. 

يجب أن نعلم أيضا أن 1'111]161 تعتمد في تصميميها 1065180 112161121 التي تم بناؤها من قبل 


2- تاريخ اللغة: 
دارت :هي لغة برمجة مصممة لتطوير تطبيقات الويب» من تطوير شركة جوجل والتي تستهدف 
فيها مطوري الويب. أحد أهداف اللغة بأن تعمل على جميع متصفحات الويب المتقدمة والأجهزة 
المحمولة وصولاً إلى خوادم الويب. 
الهدف من إنشاء لغة البرمجة دارت يكمن في المشاكل التي تواجهها لغة جافا سكريبت والتي 
يصعب حلها مثل أداء البرنامج والحماية من خطر البرمجة عبر المواقع. 


React Native Vs Flutter ١/5 1021© مقارنة بين‎ -3 


ايونيك (102120): هو منصة تسمح لك بكتابة التطبيق للجوال باستخدام ]2577250110[ وتصل العتاد 
عن طريق لغة 0210078 التي تشكل جسر بين ال 101 والهاردوير وهذا يجعلها أكثر بطاً. 


يمكنك الحصول على شرح لكامل محتويات الكتاب على قناة ال ما ۷Y٥u†u‏ 


٠١ 
> StackOverFlow Arabi 





Platform 


.0ه 


Services 


:R e21‏ يعد خيارا جيدا لتطبيقات ال 105 ولكن بالنسبة للاندرويد فقد أثبت عدم كفاءة 


Your App 





واضح بالإضافة إلى حاجته لمكاتب كثيرة . 





JSCore UI Thread 
Single Thread BG Threads 


فلاتر (171161): لا تحتاج جس بين التطبيق والعتاد ومنه نستنتج أن الفلاتر حاليا يشكل ١‏ 
تر ج جسر بین والعتاد a E‏ لحل 
الأفضل والأسرع لتطبيقات الجوال. 
Platform‏ 


- 2-9 


Your App 





:Wıindows yJJe Dart & F1 utter تنصيب‎ -4 


Intlij IDEA gl Andro1d stud10 بıصنت‎ .۱ 
؟. نذهب للموقع التالي ونحمل الملف:‎ 
http://Flutter,10/setup-windows/ 


يمكنك الحصول على شرح لكامل محتويات الكتاب على قناة ال انالا 


7 
8 StackOverFlow Arabi 
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". يستحسن أن يتم حفظ الملف على قرص ال )0:١‏ ضمن مجلد خاص 

؛. تحميل حزم الجافا 4۷2[ قبل البدء بآي شيء ان لم تكن متوفرة. 

۵. تشغيل الملف داخل المجلد والمسمى ب Flutter_console.bat‏ 

5. بعد اكتمال التنصيب نشغل 0100© ونكتب 1111161 في حال لم يتعرف التعرف على الحزمة 
نضيف مجلد الحزمة في قرص ال ٤‏ إلى متغيرات النظام. 

. في الخطوة التالية وبعد التعرف على 1111161 نكتب في 1020© عبارة 006101 1"111]161 والتي 
تختبر توفر کل متطلبات 021۲ عك :1'111]11. 


5- إضافة حزمة 31٤‏ إلى 1(٤‏ 
في هذه الخطوة سنتعلم إضافة حزمة :IntliJ IDEA ş Android studio ıJإ D21‏ 


.١‏ نفتح 1(۴ المطلوب. 
۲. نختار :plug-1ns „û Conf1gUra(101‏ 


۳. نكتب ]1101 ثم نضغط 11156211. 


.1( ۴ نعید تشغیل البرنامج‎ .٤ 


6- تحميل أدوات +1031 


.١‏ من الر ابط التالي: 
http://www.dartlang.org/tools/sdk#Install‏ 
۲. نختار تنصیب 311( حسب النظام المطلوب 


۳ء ثم وو + Kî‏ | تيادى 


7- التطبيق الأول في 10311 


سوف نستخدم في هذا الكتاب بيكة العمل 1011111163 ولبناء أول مشروع في 103116 


۱. نفتح 1(۳ ثم نختار مشروع جديد. 


يمكنك الحصول على شرح لكامل محتويات الكتاب على قناة ال ما ۷Y٥u†u‏ 


ر 


StackOverFlow Arabi 





11 


8 


س 


10 89 


؟. نثتار حزمة 10311 كما في الصورة . 


XxX 





.Console Apڑp نختار‎ .۳ 


يمكنك الحصول على شرح لكامل محتويات الكتاب على قناة ال ما ۷Y٥u†u‏ 


New Project 


StackOverFlow Arabi 





= 
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Sn 


يمكنك الحصول على شرح لكامل محتويات الكتاب على قناة ال ما ۷Y٥u†u‏ 





New Project 


e ariffon 


59 013 1]5 
® Application Forge 


2 a 


ASEAN 


مة دزعلولا 


New Project 


StackOverFlow Arabi 


= 
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0. ننتظر شريط 12067128 في الأسفل حتى الاكتمال 


wad\ldeaProjects\MyProject] x» ,..\bin\myproject.dart [MyProject] » Intell IDEA (Administrator) 8 2 


نلاحظ أن تطبيق دارت يحوي مباشرة الدالة الرئيسية 10211. 









يمكنك الحصول على شرح لكامل محتويات الكتاب على قناة ال 66ل أناه/ا 


StackOverFlow Arabi 


E MyProject [CN Users\Feisal As 





3 
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- التوثيق الخاص ب 100621111161012]101 10311آ: 


يمكنك زيارة موقع 10311 للاطلاع على جميع مزايا لغة 1033 أو مجالاتها 


كما يمكنك استخدام ما يسمى 1230 35 والذي يقدمه الموقع وهو مفسر اكواد دارت ع0112. 


© © ® Dart programming language 
+ © ê ده © 6 5 ه © تاج ؟‎ 


>“ 3 C ها‎ Secure https://www.dartlang.org 


® Dart 


Get Started Language Libraries Tools Community 


Announcing Dart 2: Optimized for client-side development. Learn more, 


import ‘*dart:async'; 
import ' dart:math ' show Random; SESS Dart helps you craft beautiful, high-quality experiences 


across all screens, with: 


main() async { 


print('Compute ft uUSing the Monte Carlo method. '); ١ تنا‎ 

await for (var estimate in computePi( ).take(500)) { ٠ م‎ client-optimized language 

} PRO ESS e Rich, powerful frameworks 
e Delightful, flexible tooling 
Stream <double> computePi( {int batch: 100000} ) async* { 6 ق ل‎ 


var total = 0; 
var count = 0; 
while (true) { 
var points = generateRandonm( ). take (batch); 
var inside = points.wllers((p) => p.isInsideUnitCircle); 


Click the underlined text to learn more. 


۸ 
Language tour Platforms Dart packages 
Learn how to use Dart's major Use Dart to build mobile apps, web Discover libraries and tools to help you 
language features. apps, and more. build apps. 


يجب العلم آن 021۲ لا تعمل على جميع المحررات أو بيئات العمل مثل ۸٥۳١‏ أو ٥102ع‏ في حين 
آخر تعمل على كل محررات شركة 5طلة81 اع ل. 


9- خقافة 021:2[: 


يتبع مبرمجو دارت تقليدا مثل كل المبرمجين في تسمية المتحولات ومن هذه التقاليد كما في 
الجدول: 


تكتب بالشكل 
Lowercase_wıith_underscore‏ 
تكتب بطريقة الجJa LowerCameICase‏ 





يمكنك الحصول على شرح لكامل محتويات الكتاب على قناة ال ما ۷Y٥u†u‏ 


> StackOverFlow Arabi 





LA 
سح‎ 


0- فهم تطبيق 102116: 
ما يهمنا بالدرجة الأولى هو التابع 17311 والذي دونه لن يعمل التطبيق لذلك أغلب عملنا ضمن 
أقواس التابع main‏ 


لنكتب تطبيقنا الأول الذي يطبع eبڊlرة:"'iۆArab "Hello Stackover Flow‏ 


vOlid main() { 


print ('Hello StackoverFlow Arabi'); 
} 





والخرج يكون: 


Hello StackoverFlow Arabi 


تأليف فيصل الأسود | مهندس برمجيات 
يمكنك الحصول على شرح لكامل محتويات الكتاب على قناة ال Youtube‏ 


2 
= StackOverFlow Arabi 
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يمكنك الحصول على شرح لكامل محتويات الكتاب على قناة ال 66ل أناه/ا 


StackOverFlow Arabi 


= 


17 








أاساسنبنات لغعة دارت 


Basics of Dart Language 


YOUR TIME IS LIMITED , SO DON’I WASIE II LIVING SOMEONE 
ELSE S LIFE 


Steve Jobe 
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اساسيات لغة دارت 


1 -المتغيرات في 10211: 
المتغير هو حجرة ذاكرية بأطوال مختلفة حسب النوع كما يمكن تخزين قيمة ضمنها. 
يعرف المتحول في دارت بالشكل التالي: 
م 11211 Var‏ 
وهنا عرفنا المتحول باسم اختياري 1 دون إعطاءه قيمة. كما يمكن تعريف المتحول وإعطاءه 
قيمة مباشرة. 
var name = "Feisal";‏ 


والكود التالي يوضح طريقة تعريف المتحولات في ]1031آ: 


7014 312)( { 
var name = "Feisal"; 
var LastName; 


LastName = "Aswad"; 
print (name +' '+ LastName) ; 


} 





كما يجب التنويه ان دارت لغة حساسة لحالة الاحرف بما يعني أن المتحول 4 غير المتحول 3. 


والخرج يكون: 


Fe1sal Aswad 


©» أنواع المتغيرات الأساسية: 


name = "Mohamad" وض‎ 


Num salary = 2000 تعريف قيمة صحيحة‎ 
Int salary = 2000 
Var salary = 2000 


Num x = 3.2 عشرية‎ 
Var P = 3.14 

Double d = 2.5 

بوليانية أو منطقية IsReady = true‏ 


IsReady = False 


كما لا يجوز تكرار تسمية متحولين بنفس الاسم في أي لغة برمجية. 


تأليف فيصل الأسود | مهندس برمجيات 
يمكنك الحصول على شرح لكامل محتويات الكتاب على قناة ال 66ل أناه/ا 


StackOverFlow Arabi 


My 
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2- الثوابت ]015121 ) والمتحولات النهائية: 


الثوابت: هي حجرات ذكرية يجب إعطائها قيمة عند التعريف ولا يمكن تغيير قيمتهاء أبداً تبقى 
ثابئة. 

const C = 10;‏ 
المتحولات النهائية: هي حجرات ذاكرية عند إعطائها قيمة لا تتغير بعدها (تسند لها قيمة مرة 
واحدة) 

final f=10; 

يتم استخدام هذه الثوابت كقيم ثابتة لبعض المعادلات مثل 5-3.14 المشتركة في الحسابات. 
في هذه الحالة يفضل تعريفه كثابت بدلا من تعريفه كمتغير لضمان استحالة تغييره في اي 
وقت. 


3- المعاملات الرياضية ١۲20۲عم0:‏ 


هي المعاملات التي تساعد في العمليات الرياضية. 
الجدول التالي يوضح المعاملات في لغة ]1001: 


المعامل الشرح 
ا ص 


vVvO1d main() { 
Ii O = O; 
ا‎ YY = وا‎ 
var resultl = 
var result2 = 
var result3 
var result4 = 
var resultD = 
PELINE (FESULEL) 
BELIL{(EESULEZAJ, 
GELALE 1م128‎ 637 
( ) 
( ) 


7 


7 


print (result4 
BDELNL(ESSULES 


7 





يمكنك الحصول على شرح لكامل محتويات الكتاب على قناة ال عم ۷Y٥u†u‏ 


> StackOverFlow Arabi 
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والخرج يكون: 





4- المعاملات الشرطية ©1)1101211/: 
هي معاملات تساعدني على التحقق من حالات معينة او الشروط المنطقية 


المعامل الشرح 


د ! » 
->» 


وسوف نفهمها اكثر من خلال الأمثلة لاحقا. 





Is الجملة‎ -5 


توجد في 102311 فكرة التحقق من نوع أو قيمة معينة. 
في هذا المثال سوف نتحقق هل المتحول 731 من نوع 5111125 سلسلة نصية. 


vOid main() { 
var num = 10; 
GEILNL (HUM 15 SLEINO) 
PDELDRE(HUM AS 1 5 2ع‎ 56 


} 





والخرج يكون: 





يمكنك الحصول على شرح لكامل محتويات الكتاب على قناة ال مط Youtu‏ 


StackOverFlow Arabi 


My 
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6- الجملة الشرطية 11-1156 


تعرضنا حتى الان لبرامج تنفذ بشكل متتالي حيث ينفذ الحاسب العبارات الموجودة في البرنامج 

بالترتيب الذي وردت به. 

ولكن في التطبيقات العملية نحتاج لاتخاذ بعض القرارات تبعا لشروط معينة» ومن هنا ظهرت 
حة د وو ٠‏ قاد ا ٠+‏ + وو تنشذ وو و“ > 1 ** E‏ 

الحاجة لوجود طرق لجعل البرنامج قادرا على تغيير تسلسل تنفيذ التعليمات تبعا للشروط المطلور 

وهو ما يعرف بالجمل الشرطية. 

ابسط الجمل الشرطية هي تلك التي تستخدم ١ء[ع-‏ 11 وطريقة كتابتها بالشكل التالي: 


void main () { 
var x=3; 
1۴ )×==3( 
{ 


print ("Yes"); 


} 


else 


{ 
print ("No"); 
} 





وهنا يتم التحقق من الشرط 3==× ويتطابق لأن × فعلا تساوي ال3 ويتم طباعة ۷6١‏ فقط. 
كما كان من الممكن كتابة البرنامج بالشكل التالي بدون اقواس للشرط وذلك لأن الشرط يحوي 
تعليمة واحدة. 
void main () {‏ 
var x=3;‏ 


1£ )×==3( 
print ("Yes"); 


else 
print ("No"); 





هنا يجب الانتباه انه في حال الشرط يحوي اكثر من تعليمة لا يجوز كتابته الا مع اقواس. 
وكذلك يمكن وضع شرط 11 لوحده بدون وضع حالة ع15ء. 


يمكنك الحصول على شرح لكامل محتويات الكتاب على قناة ال 66ل أناه/ا 


٠١ 
> StackOverFlow Arabi 
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ايضا يمكن وضع عدد لا نهائي من الشروط كما يلي: 


void main() 1 
var x=3; 
1£ )×==3( 

1 


print ("Yes"); 


} 
else if (x==6 || x==1) 
{ 
print("x is 2"); 
} 


else 


1 
print ("No"); 
} 





الشرط الثاني يتحقق من كون × هو عبارة عن العدد 6 او العدد 1 
وفي الحالات الثلاث للبرامج السابقة سيكون الخرج هنا عبارة ۲٠١‏ لأننا عرفنا × عدد بقيمة 3. 


مثال: برنامج يقوم بإدخال القيمة الصحيحة × وإذا كانت أكبر او تساوي 100 يطبع "ع "1۲g e va u‏ 


import 'dart:ilo'; 

void main() { 

print ('Enter x'); 

var x=stdin.readLineSync(); 

if(int.parse (x) > 100) 
print ('large value'); 





هنا طلبنا من المستخدم ادخال قيمة × ثم قمنا بامر الادخال عن طريق ١1ء‏ وبعدها حولنا السلسلة 
النصية المدخلة الى قيمة وقارناها مع 100 وفي حال التحقق للشرط يطبع العبارة كما يلي: 


Enter x 
150 


large value 





يمكنك الحصول على شرح لكامل محتويات الكتاب على قناة ال انالا 
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7- الجملة الشرطية S۷1٥1‏ 


تستخدم هذه الجملة الشرط المغلق (02016102© 601056) أي الشرط الذي يأخذ قيمة محددة (رقمية 
اوحرفية) ولهذا يمكن القول بأن هذه الجملة تتعامل مع متغير واحد يمكن أن يأخذ في كل مرة 


قيمة محددة من خلال مجموعة من القيم. 


الصيغة العامة للجملة: 


switch (variable) { 
case 1:Statmets; break; 
case 2: Statmets; break; 


case n: Statmets; break; 
default: Statmets; break; 





هذه الصيغة تمثل الاحتمالات التي يمكن أن يأخذها المتغير 7311316 من 1 حتى 1 كل احتمال 

يتم وضعه داخل جملة باستخدام العبارة 0356© ثم بعد ذلك كتابة الحدث الذي يمكن أن يكون 

تعليمة او مجموعة تعليمات ومن ثم ننهي التعليمات بالعبارة 516216 والتي توقف تنفيذ الحالة 

وتمنع الدخول في حالة أخرى. 

أما الاحتمال 06191116 يمثل الحدث الملازم للحالة خارج النطاق من 2.... 1 

ملاحظات: 

إذا تطابقت قيمة 111 التي تلي 0356 مع قيمة المتغير 72113516 فإنه يبدا التنفيذ عند بداية 
المطابقة ويكمل للنهاية أو أن يلتقي بتعليمة تنقل التنفيذ الى خارج هذه الجملة. 

» تنفذ العبارة التي تلي 06181116 إذا لم تتطابق أي عبارة من 2/11 مع المتغير 3113616؟. 

هو إذا أردنا اختيار تنفيذ حالة واحدة فقط من ع35»© فيجب أن نتبعها بتعليمة علوع1ط 

إذالم تتطابق أي قيمة ل 111 مع المتغير 731130516 وكانت 06191016 غير موجودة فلا يتم 
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مثال: اكنب برنامجا لإدخال القيميتين < و لا ثم اجراء العمليات الحسابية (الجمع -الطرح -القسمة- 
الضرب -باقي القسمة) باستخدام غ571 على القيميتين المدخلات. 





8- الجملة التكرارية المحدودة 101-100 


1mport 'dart:ilo'; 
vOid main () { 
print ('Enter x'); 
var x String=stdin.readLineSync () ; 
print ('Enter y'); 
var y_String=stdin.readLineSync () ; 
print ('Enter operation'); 
var operation=stdin.readLineSync () ; 
var x=int.parse(x_ String); 
var y=int.parse(y_String); 
switch (operation) { 
case '+':print (xty) ;break; 
case '-':print (x-y) ; break; 
case '*':print (x*y) ;break; 
case '/':print (x/y) ; break; 
case '$%':print (x%y) ;break; 
default:print (' Input is wrong'); 


في هذا النوع يتم تحديد عدد مرات التكرار بواسطة رقم صحيح ويبنى هذا النوع على مفهوم العداد 
01161 وهو عبارة عن متغير بأخذ قيمة ابتدائية ٥٠اه‏ ۷ [111٤141‏ تتغير باستمرار بمعدل معين 


بالزيادة أو النقصان إلى أن تصل الى القيمة النهائية 721116 157221 ولتصميم هذه البنية نستخدم 


الجملة 101. 


مثال توضيحي لهذه الجملة لنفرض نريد طباعة الاعداد من 0 الى 9 وبدون تكرار تعليمة الطباعة. 





void main () { 
for(int i=0;i1<10;i++) 
{ 


print (i); 


} 
} 
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والخرج يكون: 


8 
1 
2 
3 
4 
® 
6 
7 
8 
9 


Process finished with exit code 0 





مثال: 
اكتب برنامج لحساب مجموع الاعداد الفردية 5111200010 والاعداد الزوجية 511121761 بدءا من العدد 
0 الى العدد 50. 


vOid main () { 
var sumOdd=0 , sumEven=0; 
for(int i=20;i<51;1i++) 


1Ê )152==0( 
sumEven=sumEven+t+i; 

else 
sumOodd=sumOdd+1i ; 


} 

print (sumEven) ; 
print (sumOdd) ; 
} 





حيث العدد الزوجي هو العدد الذي يقبل القسمة على 2 مع باقي 0. 


يمكنك الحصول على شرح لكامل محتويات الكتاب على قناة ال مط Youtu‏ 
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6 
لم 


Continue q break ةnيlعتll‎ -9 


التعليمة ١١١k‏ تستخدم لإيقاف الحلقة التكرارية عندما يتحقق شرط معين. 


void main() { 
LOE (INE AUIS; Itt) 
{ 
DEIR CL 
1£ )1==2( 
{ 


print ('i==2'); 
break; 





هنا نلاحظ أن الخرج سوف يطبع من 0 حتى 2 ثم يطبع عبارة 1==2 ويتوقف عن اكمال الحلقة 
بسبب وجود تعليمة علوءع61. 





التعليمة 001٤1١1۴‏ تستخدم لاستبعاد شرط معين من الحلقة التكرارية. 

هنا سوف يطبع الاعداد من 0 الى 4 مع تجاهل الرقم 2 وذلك لأنه عند ورود 2 سوف تنفذ تعليمة 
16 التي تستبعد او تتجاهل التعليمة التي تليها وهي الطباعة فلن يقوم بالطباعة في 
حالتها. 


7701© 5312)( { 

for(int i=0;i<5;i++) 
{ 

ا 

{ 
continue; 
} 

(TL)?‏ دم 


} 





Process finished with exit code 0 
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10- الجملة التكرارية الغير محدودة whıle-loop & do-wh1le‏ 


هذا النوع غير محدد الدورات تستمر الحلقة في التنفيذ طالما الشرط محقق. 
مثال حلقة ع1انط:8؟: 


vOid main () { 
var i=0; 
while (1<10) 

1 


print (i); 
1+ + 
} 
} 





وهنا سوف يطبع الاعداد من 0 الى 9 لأن الشرط 1>10 محقق. 
ننوه أن التعليمة ++1 تماثل 1=1+1 آي زيادة قيمة واحد للمتحول 1. 
مثال حلقة .0-w 11e‏ 


void main () { 
var i=0; 
do { 
print (i); 
14+ م‎ 
}Jwhile (i<10) 


} 





وهنا سوف يطبع الاعداد من 0 الى 9 لأن الشرط 1>10 محقق كما في المثال السابق تماما 
ولكن الاختلاف يكمن بين الحلقيتين أن الأولى تختبر الشرط ثم تدخل الحلقة ولن تدخل ولا مرة لو 


الشرط غير محقق. 

َ لل.|. ا * oA‏ 300 ++ م ٠‏ ++ ۰ ۸ ۰ 4 هوه ٠‏ وو حر َ 

أما الثانية فإنها سوف تنفذ الحلقة وفي نهاية التنفيذ سوف تختبر الحلقة . اي ستدخل مرة واحدة 
۶ 

على الاقل. 
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مثال: 
برنامج لايجاد مربعات الاعداد من 1 الى 10 . 


1mport 'dart:math' ; 
void main () { 
var i=0; 

while (1<10) 


{ 
print (pow (i,2)) ; 
1+ + 

} 





11- القوائم ]1ss‏ 
لنفرض أنه طلب منك كتابة برنامج بسيط للغاية وهو إدخال درجات عشر طلاب» لكي تحل هذا 
البرنامج فإن عليك أن تقوم بالإعلان عن 12 متغيرا من وربما أن هذا مقبول نوعا ماء ولكن ماذا لو 
طلب هنك إدخال أكثر من 1000 درجة طالب لحل هذه الإشكالية توفر لك لغة دارت القوائم. 
صحيح أننا قمنا بحل مسائل من هذا النوع لم تتطلب القوائم لكن ماذا لو طلب منك البحث عن 


درجة طالب معين فلن يكون هناك آي حل إلا بواسطة قائمة. 


لغة دارت تزود القوائم والتي هي عبارة عن مصفوفات مع بعض الخصائص الإضافية. 
يمكن تعريف قائمة كما يلي: 
var 1=[1,2,3];‏ 

مثال: 
اكتب كود يحوي قائمة مخزن فيها أربع عناصر من 1 الى 4 ثم 

٠‏ اطبع العنصر الثاني. 

* غير قيمة العنصر الرابع الى 5. 

» اطبع طول القائمة. 


void main() { 
var l=[1,2,3,4]; 
print (l[1]) 7; 


1]3]=5; 
print (l.length) ; 
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هنا نلاحظ أن التغيير حصل على الحجرة رقم 1 والتي تكافئ العنصر الثاني . وذلك لأن المصفوفة 
تبدأ بالفهرسة من الصفر دوها. 
2 -التوابع 1011211012 

لقد تقدمنا كثيراً في دارت بعد مواضيع الحلقات والقواكم وربما لم يبقى لنا سوى عدة مواضيع 
حتى ننتقل إلى مرحلة البرمجة الكائنية وأحد أهم هذه المواضيع هي التوابع. 

تقوم البرمجة الهيكلية على عدة توابع بدلا من تابع واحد هو وبإمكانك بعد هذا الموضوع 
تجزتة برنامجك إلى عدة توابع كل تابع منها يقوم بوظيفة محددة ثم يسلمها للآخر بعد أن 
يكون قد أنجز ما هو مطلوب ؛ ومن الممكن النظر إلى التوابع على أنها عبارة عن اتحاد عدة أوامر 
برمجية في كتلة واحدة ولهذا الاتحاد وظيفة معينة يقوم بأدائها وبالتالي فسيصبح 
بإمكانك الاستفادة من هذه التوابع في جميع برامجك , فكما رأيت إحدى وما تقوم به من أعمال 
بإمكانك أن تقوم 1 توابع المكتبة الرياضية بصنع توابع وضمها في مكتبة واحدة : وأيضا 
فعن طريق التوابع بإمكانك تجزكة عمل برنامجك إلى أجزاء كثيرة وصغيرة للغاية بدلاً من أن 
تكون واحدة وبصراحة فإن أغلب البرامج تركت أسلوب التجزئة إلى تابع واحد هو توابع وأبدلته 
بتقسيم البرنامج إلى كائنات والكاكنات نفسها تشتمل على توابع كثيرة . من الضروري للغاية أن 
تدرك أهمية هذه الوحدة إذا ما أردت التقدم في البرمجة فأولاً هي مدخل إلى الكائنات وثانيا 
هي أحد أهم مواضيع لغة دارت . 
بعد هذه المقدمة البسيطة سندخل في اختصاص هذه الوحدة. 
فكرة التوابع هي بكتابة كود في تابع منفصل واستدعائه عند الحاجة , لنفرض أنه ليس لدينا تابع 
جاهز لإيجاد مربع العدد ونريد انشاء واحد فسيكون كما يلي: 


Int power (int num) 


{ 


اقم 1135 مم12 





وهو تابع عند استدعائه عن طريق اسمه سيقوم بالعملية الرياضية السابقة وهي إيجاد مربع العدد 


كما ان الكلمة 11 تعني ان التابع سيرجع عبارة من نوع int‏ اي عدد صحيح ويتم عملية الارجاع 
للتابع المستدعي بالعبارة 16]1111. 


void main () 1 


var x=power (5) ; 


} 





وهنا التابع الرئيسي 10212 استدعى التابع 701771 بالقيمة 5 وسيذهب التنفيذ للتابع 70161 ويقوم 
تأليف فيصل الأسود | مهندس برمجيات 
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بالجداء ويعيد نتيجة الجداء للتابع main‏ لتتوضع النتيجة في المتحول ×. 
بعض التوابع لا ترجع شيء فنضع عند تعريفها الكلمة 7010 وهنا لا نحتاج للإرجاع او عبارة 112ااع]. 
3- التعليقات: 


“التعليقات 201111116115) “هي عبارة عن جمل توضيحية يقوم المبرمج بإضافتها ضمن أي مكان 
في المشروع البرمجي أثناء بناكه. وتعتبر التعليقات كالمفتاح؛ فهي تهدف إلى تسهيل قراءة 
المشروع البرمجي سواء للشخص الذي قام ببناكه أو حتى لأي شخص آخر يحاول فهمه أو التعديل 
عليه. 


٠+ 


التعليقات يتم تجاهلها بشكل نهائي أثناء تنفيذ المشروع البرمجي حتى وإن كانت تحتوي على 
اكواد برمجية. فهي لا تظهر نهائيا ولا يستطيع رؤيتها إلا من يحصل على ملفات المشروع 


البرمجي. 


> 


ولتبسيط فهم فوائد التعليقات في لغات البرمجة لنقل إنك قمت ببناء مشروع برمجي مؤلف من 
مكة سطر برمجي على سبيل المثال ثم أردت أن تقوم بالتعديل على المشروع بعد فترة زمينه؛ لنقل 
شهر على سبيل المثال؛ أليس الأمر بغاية الصعوبة أن تتذكر كل ما قمت بفعله أثناء كتابة مشروعك 
البرمجي؟ أليس من الصعب البحث في مكة سطر للتعديل على جزء معين؟ ناهيك عما إذا كنت قد 
طرحت المشروع لمبرمجين آخرين لإكمال المشروع البرمجي أو الاعتماد عليه. لهذا السبب وجدت 
التعليقات ببساطة؛ لشرح المشروع البرمجي وتقسيمة بطريقة تجعل من التعديل على المشروع أمر 


بغاية البساطة لأي شخصء حتى وإن لم يكن هو من قام ببناء المشروع من الأساس. 


لعل السؤال في ذهنك الآن هو كيفية وضع التعليقات في لغات البرمجة المختلفة؟ في الحقيقة 
تختلف طريقة إضافة التعليقات من لغة لأخرى؛ ولكن تقريبا معظم التعليقات في لغات البرمجة 
مستمدة من نظام التعليقات في لغتي © و++0) وهو إضافة تعليق بعد شرطتين مائلتين لليسار 
(//) ثم كتابة التعليق بعد هاتين الشرطتين بهذا الشكل: 


/Ihere wı1ll set comment 


/Ihere wı1ll set comment 





وبمجرد النزول لسطر جديد ينتهي التعليق» ونفس هذا النوع من التعليقات الذي ينتهي بمجرد 
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النزول لسطر جديد هو أن نقوم باستخدام الرمز (#)» ومثال على ذلك: 


#here wıll set comment 





#here wıll set comment 
أما النوع الثاني هو للتعليقات الطويلة والتي نقوم بتميزيهاء وهو باستخدام الشرطة المائلة لليسار‎ 
لنجمة‎ ١ لتعليق عكس الفتح وهو بإضافة علامة‎ 1 ١ ند لنجمة لفتح | 1 لتعليق:» ثم نقوم بإغلاق‎ ١ ثم علامة‎ 
متبوعة بالشرطة المائلة لليسار ليصبح بالشكل التالي:‎ 


/* here wıll comments */ 
1 





/* here wıll comments */ 


تعتبر إضافة التعليقات أمر يزيد من احترافية العمل الخاص بك حتى وإن كان المشروع البرمجي 
الخاص بك بسيط؛ وعلى الرغم أن لك الحرية المطلقة في إضافة التعليقات في أي مكان في 
مشروعك البرمجي ولكن هناك قواعد عامة يتم اتباعها من قبل المبرمجين؛ هذه القواعد ليست 
بالضرورة أن تلتزم بها إلا عندما تقوم بطرح المشروع البرمجي الخاص بك لمبرمجين آخرين؛ ولعل 
أهم هذه القواعد هي ما يلي: 


استخدم كلمات واضحة ومفهومة للجميع في شرح التعليق؛ ولا تستخدم رموز وطلاسم غير 
قابلة للفهم. 

٠‏ استخدم اللغة الإنجليزية وذلك لتسمح لأي شخص بفهم التعليق, لأن اللغة الإنجليزية هي 
اللغة الأكثر انتشارا بين لغات العالم. 

٠‏ أضف التعليقات ليشرح التعليق ما بعده من أكود برمجية, وهذا ما يجعل قراءة السكربت 
أكثر يسر. ولا تقم بإضافة التعليقات بمناطق عشوائية من المشروع البرمجي لأن هذا الأمر 
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4-جدول الكلمات المحجوزة: 


هي كلمات محجوزة للغة دارت ولا يجب تسمية المتحولات او الكائنات بأسماء مشابهة الجدول 


التالي يذكر أهمها: 
default tinally rethrow try‏ 151 
return var‏ 
else 1 super voll‏ 
witch while‏ 1 ْ تالت 
extends 1 his with‏ 





false 1 throw 


يتا inal mull‏ 15 ة] 1 ألاقة 


5- أنواع العناصر في ]1031آ: 


تقدم دارت عدد جيد من الأنواع للمتحولات اهم المتحولات المقدمة مع مكتبة دارت: 


الأعداد: تقدم 0311 نوعين من الأعداد نذكرها. 
الأعداد الصحيحة :1١‏ وهي قيم مجالها ذاكريا من ٠‏ حتى 14 بت. 
مثال: 


var x = 1 
var nex - 0201121 


حيث الرقم الثاني مكتوب بطريقة النظام الست عشري. 


ه الأعداد ذات الفاصلة 101116: 
هي أعداد بفاصلة أكبر من 14 بت حسب معیار .1٤ ٤٤754‏ 
مثال: 


vary =1.1;‏ 
var exponents = 1.42e5‏ 
وكلا من 0011516 ,171 ينتمي إلى النوع 121112 والذي يتضمن التعامل مع المؤثرات والمعاملات 
الرياضية مثل (+,-,*,/) كذلك التوابع الرياضية مثل ()4855 للقيمة المطلقة ()11©» للتقريب يمكن 
التعامل مع هذه التعامل باستدعاء المكتبة 1112161.01211. 


يمكنك الحصول على شرح لكامل محتويات الكتاب على قناة ال 66ل أناه/ا 
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السلاسل النصية 5]1:1115: 
السلاسل النصية هي عبارة عن تسلسل محارف من ترمیز 01۴. 
أي يمكن استخدام مختلف اللغات. 
نستخدم في 12۲ لكتابة سلسلة كلا من علاقتي التنصيص المفردة والمضاعفة مثل: 
var s3 ='H\'s astring';//lt's a string‏ 





var s4 = "It's a string"; 
تستخدم للهروب وذلك لإظهار العلامات المحجوزة.‎ ١ العلامة‎ 


var sS = 'hello' + 'world'; 


كما يوجد طريقة لكتابة السلسلة على عدة أسطر باستخدام علامة التنصيص الثلاثة مثال: 
var s =" hello we"‏ 
"Are study dart";‏ 
وكما في لغات البرمجة إن أردت تجاوز سطر عند الطباعة لسلسلة نستخدم 2 : 


var s= "hello world\n I am here"; 


وهنا سيطبع 701101 16110 في سطر و 2616 310 1 في سطر آخر. 


المتحولات المنطقية ١00162125‏ 1: 
المتحول البولياني أو المنطقي هو متحول يأخذ قيمتين فقط هما 12156 01 1116 ودائما عند اختبار 
الشروط يختبر عبارات منطقية مثل: 


1f (x == true) 
print ("yes"); 


11) == 5( 
print ("x = 5"); 





يمكنك الحصول على شرح لكامل محتويات الكتاب على قناة ال ما ۷Y٥u†u‏ 
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6- اللواكح والقواكم )15.]: 
من الاستخدامات الشائعة في البرمجة هي المصفوفات » دارت تقدم المصفوفات على شكل قوائم 
کائنات. 
القائمة هي ببساطة مجموعة مرتبة من الكائنات ,والمكتبة الأساسية مع دارت تزود أصناف التعامل 


مع القوائم 5 


يبين الشكل تمثيل منطقي لاستخدام القوائم في دارت: 


هنا القائمة تحوي ثلاث قيم هم 12-44-64 وتعرف على انها عناصر القائمة. 


كل عنصر من القائمة يمكن الوصول له عن طريق رقم مميز وفريد له يدعى الفهرس :11016 
.الفهرس في دارت يبد من الصفر وينتهي حتى (طول المصفوفة - 1) وهنا لدينا الفهرس بدء من 
الصفر وانتهى عند القيمة 2. 


يمكن ان تكون القوائم: 
۰ بطول ثابت: 
أي لها طول محدد عند التصريح عنها ولا يمكن ان تتسع اكثر من طولها المحدد. 
۰ بطول متنامي: 
هي لوائح لا نهائكية تتسع للعديد من الكائنات ضمنها ولا يوجد لها حدود اتساع. 


يمكنك الحصول على شرح لكامل محتويات الكتاب على قناة ال 66ل أناه/ا 
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بعض التوابع الخاصة بالتعامل مع اللوائح: 


الشرح اع 
يعيد العنصر الأول من اللائحة first)‏ 
يعيد قيمة بوليانية تحدد في حال اللائحة فارغة isEmpty)‏ 
ام لاء 
true = empty‏ 
false =not empty‏ 
يعيد قيمة بوليانية تحدد في حال اللائحة IsNotEmpty()‏ 


ليست فارغة ام لاء 
true = not empty‏ 
false =empty‏ 


يعيد حجم اللائحة. length‏ 
يعيد العنصر الاخير من اللائحة last‏ 
يعيد كائن لنفس اللائحة مرتبة بترتيب عكسي. reversed‏ 
يفحص إذا كانت اللائحة تحوي عنصر واحد فقط single‏ 
وترجعه. 


7- الخرانط 1/137 : 


هي عموما كائنات لكل منها قيمة ومفتاح. وكل من القيمة أو المفتاح يمكن أن يكون أي نوع من 
الكائنات. 
كل مفتاح فريد ونادر لا يتكرر ضمن الخريطة أما القيمة يمكن أن تكون نفسها لمفتاحين. 


var names = { 
first’: ‘Ahmad, 


'second': Feras', 
thıird': 'Nour' 
1 





حيث العناصر في العامود الأيسر هي المفاتيح والعامود الأيمن هي القيم. 
مثال: 


var nobleGases = { 
Z: helum!, 





10: 'neon', 


يمكنك الحصول على شرح لكامل محتويات الكتاب على قناة ال ما ۷Y٥u†u‏ 
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18: 'argon' 
1 
كما يمكن كتابة الخريطة بالشكل:‎ 
var Names = MapÛ; 
Names ['first'] = 'Ahmad'; 


Names['second'] = 'Feras'; 
Names['third'] = 'Nour'; 





كما يمكن إضافة عنصر جديد للخريطة في أي وقت: 





ز'طوعهة' > [1ناه] إوعططتة اا 


8- جدول المؤثرات الزيادة والنقصان: 


Operator Result 

Subtraction {also unary minus)‏ سا 
Multiplication‏ * 

Division 

96 Modulus 

Increment 
+= Addition assignment 
Subtraction assignment 
Multiplication assignment 


Division assignment 





Modulus assignment 


9 - جدول العمليات المنطقية: 


Input! Input1 And Or 
false false false false 
false true false true 
true false false true 
true true true true 











يمكنك الحصول على شرح لكامل محتويات الكتاب على قناة ال ما ۷Y٥u†u‏ 
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.tiTy ¬ ca التعليمة‎ - 20 


تستخدم هذه التعليمة لتجنب الوقوع في حالات فشل للبرنامج عند ورود خطأ ويتم فيها وضع كل 
من البرنامج المطلوب أو الجزء المطلوب في '173) مثل العمليات المهمة فتح قاعدة البيانات - 
الأشكال في الشبكة وفي حال وجود أي خطا سوف يكمل التنفيذ في 0216 


مثال: 


try { 
var x 5 
var ¥ 0; 
var 2 x/y; 
print (Zz); 


} 
catch (e) { 


print ('divide by zero'); 





يمكنك الحصول على شرح لكامل محتويات الكتاب على قناة ال ما ۷Y٥u†u‏ 


} 


٩ 
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البروجة المتقدمة فى دارت 
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البروجة المتقدمة في دارت 
1- الأصناف: 


دارت هي لغة كائنية تتعامل مع الأصناف والعمليات عليها. 

كل كائكن هو نسخة من صنف أساسي. 

لنبسط الامر الصنف هو عبارة عن نوع جديد أريد أنا إنشاءه وبعد الانتهاء من بناءه آخذ منه نسخ 
تسمى كائنات. 

مثال: لنفرض أننا أردنا إنشاء صنف لنقطة ونعلم أن هذه النقطة تتكون من احداثيات ,× وهنا لابد 


أن نذكر أن الكلاس يتكون من خصائص أفعال (طرق) وباني. 


صنف نقطة هو: 


class Point 1 
num x; 


num Y; 
point (num x, num y) 
1 
this.x جع‎ 
this.y Yî; 


} 
void printXAndY () 


{ 
print (x) ; 
print (y) ; 
} 





بعد أن شكلنا الصنف يمكن استخدامه عدد لا نهائي من المرات بتشكيل كائن منه كما يلي: 


Point p1 = new Point(5,3); 


وهنا أنشأنا کائن 1م من نوع ۴٥1۸۲‏ وله القيمة 3= ,35=× 
وفي حال كتبنا : 


p1.printXAndY0; 


سوف يقوم بطباعة القيم كما يلي: 


4 


O‏ ح© 
9 
ع 
.P‏ 
= 
55 


Point (this.x, th1s.y): 


يمكنك الحصول على شرح لكامل محتويات الكتاب على قناة ال ما ۷Y٥u†u‏ 
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أي القيمة الأولى الواردة عند انشاء الكائن هي نفسها قيمة × للصنف ]70102 والقيمة الثانية هي 


قي 37 || ن 


كما رأينا يستدعي الفعل (الطريقة) في ]031 عن طريق اسم الكائكن 01 ثم اسم الطريقة المطلوبة. 
مثال: ننشاً صنف لسيارة لها (سرعة - لون) وعند إعطائها مساحة تقوم بتقدير الزمن لك عن طريق 


فعل خاص لها. 


class Car { 

num speed; 

String color; 

car (this. speed, this.color) ; 
double giveMeTime (int distance) 


{ 


return speed/distance; 
} 
} 





وفي البرنامج الرئيسي ننشا سيارتين 
Car c1 = new Car (50, 'Red');‏ 
var Z1 = c1.giveMeTime (25) ;‏ 
print (Z1);‏ 
Car c2 = new Car(30, 'Green');‏ 
c2.speed = 20;‏ 
var Z2 = c2.giveMeTime (20) ;‏ 
print (Z2);‏ 





أنشأنا كائنين لسيارتين الأولى بسرعة ٠١‏ ولون حمر والثانية بسرعة ٠١‏ ولون أخضر غيرنا سرعة السيارة 





٠١ الثانية ل‎ 
Color ="Red" Color ="green" 
Speed=50 Speed=20 
الخرج سيكون‎ 


يمكنك الحصول على شرح لكامل محتويات الكتاب على قناة ال ما ۷Y٥u†u‏ 
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< 
التعليمة ۲۵۲1۲۸ مهمتها إرجاع قيمة من الطريقة إلى التابع. كما رأينا عندما طلبت 1ء الزمن 
بطريقة ()11768161110ع تم ارجاع القيمة للبرنامج الرئيسي عن طريق 16110112 وهناك بعض 
الطريق لا ترجع شيء. 


2- معرفات الوصول: 
على خلاف الكثير من لغات البرمجة 0311 لا تحوي معرفات وصول الكلاسيكية انما تحوي فقط 
معرف الخصوصية 7117216 على مستوى الحزمة ككل. 
أي إذا أردنا إنشاء متحول ضمن صنف 012855 وهذا المتحول لا يوجد أي كلاس اخر يمكنه معرفة 
قيمته نكتب المتحول بالشكل: 


var _X =5; 


بحيث نضع قبل اسمه _ وهذا الكلام ينطبق أيضا على التوابع والطرق بحيث لا استطيع استدعاء أي 
طريقة من خازنة المكتبة في حال بدأت بالمعرف _ مثلا 


int _gIiveMeT1ime () 


3- المتحول الستاتيكي: 
الكثير يعاني من فهم المتحول الستاتيكي انما هو يحمل مفهوما بسيطا جدا. لنعود لمثالنا السابق 
بخصوص إنشاء صنف سيارة ونفرض أننا عرفنا متحول السرعة بشكل 51210 كما يلي: 


class car { 

static num speed; 

GLEILNG CGOLOE?; 

car (this.speed, this.color); 
double giveMeTime (int distance) 


{ 


return speed/distance; 


1 
] 





يمكنك الحصول على شرح لكامل محتويات الكتاب على قناة ال 66ل أناه/ا 
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هنا يكون شكل الكائنات عند إنشاء سيارتين كما يلي: 


Speed=20 


ا 


Color ="Red’ Color ="green" 





فنلاحظ أنه عند تعريف متحول ستاتيكي يصبح قيمة نفسها لكل الكائنات بحيث إذا عدلتها لأي 
كائن (سيارة) سوف تتعدل للجميع. 

طبعا يوجد أيضا التوابع الستاتيكية ويجب أن نعلم أن التابع الستاتيكي يتعامل حصرا مع متحول 
ستاتيكى. 


e 


4- الوراثة: 


الوراثة مفهوم بسيط يساعدني على بناء الأصناف بالاعتماد على أصناف سابقة ويريحني من عناء 
صناعتها من جديد. 

لنفرض أريد إنشاء صنف سيارة لديها (سرعة: لون وزن) وتابع ليعطيني الوقت كما في المثال السابق 
هنا نلاحظ أنه لدينا الصنف السيارة القديم فيه كل من السرعة واللون والتابع المطلوب ولكننا بحاجة 


لإضافة خاصة الوزن. فهنا نستخدم الوراثة ويكون الصنف الجديد كما في الشكل: 


class car2 extends car { 
car2 (num speed, String color) 


super (speed, color); 
var weight; 


} 





يمكنك الحصول على شرح لكامل محتويات الكتاب على قناة ال ما ۷Y٥u†u‏ 
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أي صنف السيارة 212) يرث 1205© من صنف السيارة 21) ويأخذ جميع خصائصھا وأفعالها. 


Car 


ر 
1 
Car2 ٠‏ 


فلو أنشأنا الان الكائنين الأول من نوع °٩۲‏ والثاني من C4۲2‏ يكونا بالشكل: 
C1 C2‏ 


Speed Speed 
Weight 





يمكنك الحصول على شرح لكامل محتويات الكتاب على قناة ال ما ۷Y٥u†u‏ 
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يمكنك الحصول على شرح لكامل محتويات الكتاب على قناة ال ما ۷Y٥u†u‏ 
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التعرف على بينم فلائر 


٠6 


مقدمة: 


فلاتر هي منصة تطوير تطبيقات جوال مفتوحة المصدر أنشأت من قبل جوجل وتستخدم هذه 
المنصة من اجل تطوير تطبيقات أنظمة اندرويد و 105 وكذلك نظام فوشيا الجديد. 

النسخة الأولى من فلاتر والمعروفة ب '(>51 السماء قد بنيت لتطوير تطبيقات الاندرويد عام ٠١١١‏ 
وهكذا تطورت حتى باقي أنظمة التشغيل. 

يجب أن ننوه أن أي شيء في فلاتر هو ]771056 على سبيل المثال: النص؛ الصورة والزر هي أ71056. 
بعد أن نكون جهزنا أحد )And rid studio, [nti DEA) IDE J‏ کما یمکنك زيارة التوثيق 
الخاص ب ۴1)۴۲ من خلال الموقع التالي : 


https://flutter.10 
سوف نستخدم في كتابة البرامج بيكة العمل 1108.4 [10]11 لأنها تمكننا من بناء تطبيقات نظامي ال‎ 


59 والاندرويد كما ننوه أيضا أن دارت هي اللغة التي ستكون لنظام فوشيا البديل من جوجل. 
كما يجب التنويه إلى ضرورة تنصيب 51611010 41201010 في جميع الأحوال للاستفادة من المحاكيات 
المتضمنة مع حزمته. 


المشروع الأول: 


.١‏ بعد فتح ث.آ(]] [12)11 نختار 01ع[010 26177 ع216ع1) ونختار من الشريط الأيسر الخيار 


Flutter‏ كما في الصورة. 


New Project 2 





يمكنك الحصول على شرح لكامل محتويات الكتاب على قناة ال 66ل أناه/ا 
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؟. نعطي المشروع اسم ومسار محدد ثم نختار أساس عمل النظام ويفضل أن يبقى كما هو 
محدد في الصورة وثم Finish‏ . 


New Project XxX 





؟. بعد فتح المشروع سنلاحظ قالب لاي مشروع ۴1)٥۲‏ بالشكل التالي. 





؛. في الشريط الأيسر من مجموعة المجلدات والملفات التابعة لمشروع ۴10٤٤٥۲‏ والتي لن 
نتطرق لها كثيراء ما يهمنا هو بعض المجلدات مثل 110 الذي يحوي المكتبات في المشروع 


يمكنك الحصول على شرح لكامل محتويات الكتاب على قناة ال 66ل أناه/ا 
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التطبيق الأول: 
آي تطبیق ۴1)٥۲‏ يجب أن يحوي الأمور الأساسية التالية: 
.١‏ استدعاء المكتبة +112161121.0131 والمستخدمة في التصميم. 
؟. التابع main‏ لبدء المشروع منه. 


*. التابع () 126272 والذي يعتبر التابع المنشط (المشغل) للتصميم. 


import 'package:flutter/material.dart'; 


vOlid main() { 
runApp ( 


new Center ( 


child: new Text ('Hello Stack Overflow Arabi', 
textDirection: TextDirection.ltr), 





هنا أنشأنا برنامجنا الأول والذي يطبع العبارة التالية كما في الصورة. 


تأليف فيصل الأسود | مهندس برمجيات 
يمكنك الحصول على شرح لكامل محتويات الكتاب على قناة ال 66ل أناه/ا 
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یجب آن نعلم آن تصمیم واجهات تطبیقات ۴1)۶۲ يعتمد بشكل أساسي Material Desi2¬ JJe‏ 
المدعوم أيضا من جوجل ولكي نبداً تصميم الواجهة سوف نستخدم أصناف كءعءءه1ء الخاصة ب 


.Material Design 


import 'package:flutter/material.dart'; 


vOid main() { 
runApp ( 
new Material ( 
color: Colors. greenAccent, 
child: new Center ( 
child: new Text('Feisal Aswad', 
textDirection: TextDirection.ltr, 
style: new TextStyle ( 


fontSize: 25, 

fontWeight: FontWeight. bold, 
fontStyle: FontStyle.italic 
)), 





يمكنك الحصول على شرح لكامل محتويات الكتاب على قناة ال ما ۷Y٥u†u‏ 
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والناتج هنا هو عبارة عن خلفية بلون "أخضر" مع كتابة تظهر بالوسط بخط 8010 ,12116 كما في 


الصورة التالية: 





كما يمكن عزل التصميم بصنف خاص وهذا ما يسمى بعزل العناصر الثابتة 55ع1ع]5)]3 حيث نقوم 
بوضع كل العناصر الثابتة والتي لا تطلب منها الاستجابة للأحداث أو التفاعل مع المستخدم بعزلها 


بصنف خاص بها واستدعاءها بالتابع الأساسي كما في الشكل: 
main.dart‏ 


import 'package: flutter/material.dart' ; 
import 'MyUi.dart'; 


void main () { 


runApp ( new MaterialApPp ( 
home :MyText () , 


J); // MaterialAPP 
} 


MyUı.dart 
import 'package:flutter/material.dart' ; 


class MyText extends StatelessWidget { 
0 ع‎ 2210© 
Widget build (BuildContext context) { 
return new Material ( 
color : Colors.green, 
child : new Center ( 
child : new Text('Feisal Aswad', 
textDirection: TextDirection.ltr, 
style : new TextStyle (fontSize : 23.0, 
fontWeight : FontWeight. bold) //Text style 
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), //Text 
( //center 
; //Material 





والناتج سوف يكون مماثل للتطبيق السابق مع الاستفادة من كوننا أصبح لدينا 7101861 جاهزة 
ويمكن استدعائها أكثر من مرة ويكون التعديل عليها سهل للغاية. 
كما يجب الانتباه أننا وضعناه داخل المسار 116 في ملف جديد اسمه 101.12۲٤‏ وهذا ما يفسر 


الاستدعاء +1)0/171.181 في البرنامج الرئيسي. 


يمكنك الحصول على شرح لكامل محتويات الكتاب على قناة ال 66ل أناه/ا 


2 
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أنظمة التصميم 1.277011]:5 


توفر لنا 1"110]161 مجموعة من الحاويات 0012121261 وهي آيضا 116۲ ومن الأفضل استخدامها 

لاحتواء ال 177105615 الأخرى فالمستحسن في برنامجنا السابق استبدال الكلمة 112161121 161 ب 

1 7617 لكي تكون حاوية للنص التي بداخلها وسيبقى البرنامج كما هو بالطبع لأن 

111 )هنا تمائثل 213161121 ويوجد 1323:0115 مختلفة سنراها في الدروس اللاحقة. 

كما يمكن أن تحوي ال 129/011]5 أو مخطط التصميم مخططات تصميم أخرى داخلها 3(/011]5.آ. 

من أنواع 12(9'01115: 

:) 01111111 التخطيط العامودي‎ ٠ 

في مثالنا التالي سوف ننشاً 0012131261 وبداخلها 001111201 وهو أيضا 12(:010]5آ هذا 
العمود :60111101 سيكون له عدة أولاد من نوع )6 وهكذا نفهم أنه يمكن لاي ءاه ر1 ان 


يحوي عدد غير محدد من الأبناء. 


11110 
import 'package: flutter/material.dart' ; 


class MyColumn extends StatelessWidget { 
Qdoverride 
Widget build (BuildContext context) { 
return new Container ( 
color : Colors.green, 
child : new Column ( 
mainAxisAlignment : MainAxisAlignment. center, 
children : <Widget> [ 
new Text('Feisal Aswad', 
textDirection : TextDirection.ltr), 
new Text('Ahmad Afandi', 
textDirection : TextDirection.ltr), 
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والملف الرئيسي 11212.01211 هو نفسه الملف للبرنامج السابق. 





والناتج كما ظاهر بالصورة أعلاد. 
٠‏ التخطيط الأفقي (السطري) ؟1801: 
رأينا في التخطيط السابق كيف ترتب ال ۷10٥۲‏ عاموديا ضمن عامود وماذا لو ردنا 
ترتيبها أفقيا بجانب بعضها البعض هناك نستخدم ال 12(/011]5 المسماة 15017 باستبدال 
كلمة 00111171 في البرنامج السابق بكلمة 15017 سوف يكون ناتج البرنامج كما يلي: 
ويجب الانتباه أنه لا يجب أن تمتلئ الشاشة عرضيا بحيث نضع عناصر مناسبة لحجم 


| لله ال له وه 
لشاشة. 





ملاحظة: يمكن أن نجعل العرض النص الأخير في التخطيط يأخذ كامل المساحة المتبقية واستدعاء 
التابع 120312060 للعنصر الأخير كما يلي: 


يمكنك الحصول على شرح لكامل محتويات الكتاب على قناة ال 66ل أناه/ا 
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1110 
import 'package:flutter/material.dart' ; 


class MyColumn extends StatelessWidget { 
Qdoverride 
Widget build (BuildContext context) { 
return new Container ( 
color : Colors. greenAccent, 
child : new Row ( 
malnAxisAlignment : MainAxisAlignment. center, 
children : <Widget>[ 
new Text('Feisal Aswad', 
textDirection : TextDirection.ltr), 
Expanded( child: new Text('Ahmad Afandi', 
textDirection : TextDirection. ltr) 
) 


7, 





يوجد المزيد من ال 127701115 التي ربما ستناولها في كتابنا لاحقا 


يمكنك الحصول على شرح لكامل محتويات الكتاب على قناة ال 66ل أناه/ا 


١ 
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1111161" المقدمة مع‎ Widget J 


هي مجموعة من العناصر المقدمة مع حزمة )ل؟ ۲ع)) لآ۴ الأساسية. 
حيث تقدم Flutter‏ نوعين من العناصر الثابتة والمرنة وهي: 


Stateless widget ® 
Stateful widget ® 


سنبداً مع العنصر 513161101 كما سيمر معنا في المثال التالي. 
يجب الانتباه إلى فكرة أن إنشاء زر مرن يمر بمرحلتين أو يتكون من صنيفين الأول للبناء والثاني 


للتعديل كل مرة. 
Stateful Widget‏ 
Our Widget‏ 3 نف التعتيل 
BulidState‏ | 
صنف: اليناع 


الان سنقوم بعرض اهم الاءع ل۷1 المقدمة مع حزمة ۲ ut)‏ 
Raised Button ®‏ 







الكود التالي هو ل إنشاء زر كما بينا في المخطط السابق: 
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main.dart 
import 'Package:flutter/material.dart'; 
void main(){ 
runApp(new MaterialA pp( 
home: new ourWidget(), 
0) 
} 


ourWidgetFile.dart 
class ourWidget extends StatefulWidget{ 
@override 
State<StatefulWidget> createState() { 
// TODO: implement create State 
return new _Buildstate(); 


} 


] 


class _Buildstate extends State<our Widget> 


{ 


String names= ''; 


@override 
Widget build(BuildContext context) { 
// TODO: implement build 
return new Scaffold( 
appBar : new AppBar( 
backgroundColor: Colors.blue, 
title: new Text ('MyAPP'""), 
) 
body: new Container( 
child: new RaisedButton( 
onPressed: () => clickfunc(' Hi"), 
child: new Text ("click me ${names}') 
) 
), 
); 
} 
void clickfunc(String txt){ 
setState((){ 
names = txt; 





في الكود السابق أنشأنا زر داخل تابع البناء وعند كل استدعاء لتابع التعديل سوف يعيد بناءه وهكذا 
يكون الزر حرف. نلاحظ أن الزر يطلب التابع ٤«٠اعءذاء‏ عن طريق تابع مجهول ويمرر له نص معين 
كما أن التابع يعرف في نهاية الصنف. 


يمكنك الحصول على شرح لكامل محتويات الكتاب على قناة ال 66ل أناه/ا 
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٠‏ الزر المسطح 112]811]605: هو زر يأخذ شكل نص عادي فقط؛ كما يبين الشكل التالي الزر من نوع 
.FlatButton‏ 


MyAPP 








ويمكن تعريف كما في الكود التالي: 
ourWidgetFile.dart‏ 


class ourWidget extends StatefulWidget { 
Goverride 
State<StatefulWidget> createState() { 
// TODO: implement createState 
return new _Buildstate () ; 


} 
} 


class _Buildstate extends State<ourWidget> 
{ 
String names= ''; 
Goverride 
Widget build (BuildContext context) 1 
// TODO: implement build 
return new Scaffold ( 
appBar : new AppBar ) 
backgroundColor: Colors. blue, 
title: new Text ("MyAPP") , 
), 
body: new Container ( 
child: new FlatButton ( 
onPressed: () => clickfunc('Hi'), 
child: new Text ('click me ${names} ') 


void clickfunc (String txt) { 
setState ( () { 
names = txt; 


J? 





هنا الاستدعاء عن طريق التابع 10315 كما في المثال السابق. 


يمكنك الحصول على شرح لكامل محتويات الكتاب على قناة ال 66ل أناه/ا 
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» الزر ÎJlيقigة :Icon Button‏ 
هو زر يحوي داخله صورة على شكل أيقونة كما في الشكل: 


2 446 


o 











ourWidgetFile.dart 


class ourWidget extends StatefulWidget { 
Goverride 
State<StatefulWidget> createState() { 
// TODO: implement createState 
return new _Buildstate () ; 


} 
} 


class _Buildstate extends State<ourWidget> 
{ 
String names= ''; 
Goverride 
Widget build (BuildContext context) { 
// TODO: implement build 
return new Scaffold ( 
appBar : new AppBar ) 
backgroundColor: Colors. blue, 
title: new Text ("MyAPP"), 
), 
body: new Container ( 
child: new IconButton ( 
onPressed: () => clickfunc('Hi'), 
icon: Icon (Icons.wifi tethering,size: 


void clickfunc (String txt) { 
setState ( () { 
names = txt; 


J? 
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حيث تتيح لنا فلاتر العديد من الرموز والاشكال الجاهزة. 

ء نص الإدخال 10ع11)ه 1 : 
هو حقل نصي يسمح للمستخدم بإدخال نص معين مثل كلمة مرور أو اسم مستخدم كما هو مبين 
في الشكل: 











ويمكن تعريفه كما في الكود التالي 
ourWidgetFile.dart‏ 


class ourWidget extends StatefulWidget { 
Goverride 
State<StatefulWidget> createState() { 
// TODO: implement createState 
return new _Buildstate () ; 


} 
} 


class _Buildstate extends State<ourWidget> 
{ 
String names= ''; 
Goverride 
Widget build (BuildContext context) { 
// TODO: implement build 


return new Scaffold ( 
appBar : new AppBar ) 
backgroundColor: Colors. blue, 
title: new Text ("MyAPP"), 


), 
body: new Container ( 
child: new TextField ( 
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0 


الشرح الخاصه 

تجعل الحقل النصي يصحح الأخطاء اللغوية Auto correct : true‏ 
تسمح لنا بتحديد المدخلات (رقمي - ايميل) keyboardType: TextInputT' ype‏ 
وتساعد في عملية اختيار الدخل 

تسمح لك بتشكيل صنف لإظهار الحقل النصي decoration‏ 
بعدة أشكال 





مثال تطبيقي: 
في مثالنا التالي سوف نقوم بتصميم واجهة تحوي حقل ادخال له العنوان 111102561 10206116 
وبجانبه صورة المستخدم كما أن نوع المدخلات هي من نوع رقم هاتف 


ourWidgetFile.dart 


class ourWidget extends StatefulWidget { 
Goverride 
State<StatefulWidget> createState() 1 
// TODO: implement createState 
return new _Buildstate () ; 
} 
} 
class _Buildstate extends State<ourWidget> 
{ 
String names= ''; 
Goverride 
Widget build (BuildContext context) { 


// TODO: implement build 
return new Scaffold ( 
appBar : new AppBar ) 
backgroundColor: Colors. blue, 
title: new Text ("MyAPP"), 


), 
body: new Container ( 
child: new TextField ( 
autocorrect: true, 
keyboardType: TextInputType. phone, 
decoration: new InputDecoration ) 
icon: Icon (Icons.perm identity), 
labelText: 'mobile number', 
hintText: 'Enter Here'", 
), // Input Decoration 
( /⁄/ text field 
), 
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مربع الاختيار :Checkbox‏ 
جميعنا نعرف مربع الاختيار المتعدد الذي يسمح لنا اختيار بعض العناصر وترك أخرى كما هو مبين 
في الصورة. 


ourWidgetFile.dart 


class ourWidget extends StatefulWidget { 
Goverride 
State<StatefulWidget> createState() { 
// TODO: implement createState 
return new _Buildstate () ; 


} 
} 


class _Buildstate extends State<ourWidget> 
{ 
String names= ''; 
Goverride 
Widget build (BuildContext context) 1 
// TODO: implement build 
return new Scaffold ( 


appBar : new AppBar ) 
backgroundColor: Colors. blue, 
title: new Text ("MyAPP"), 


), 
body: new Container ( 
child: new Column ( 
children: <Widget>[ 
new Checkbox ( 
value: true, 
onChanged: null, 
activeColor: Colors. greenAccent,), 
new CheckboxListTile (value: true, 
onChanged: null, 
title: new Text ("Choose"), 
secondary: new Icon (Icons.adb) ,) 


1, 





هنا قمنا ببناء عنصر من نوع ×K80)ءع1ح‏ ومربع الاختيار المطور .CheckBox L1s111¢‏ 
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»ء مبدل الحالة :sw1)٤C٣‏ 
هو مشابه تماما ل ×0ا)ءعطء مع اختلاف في الشكل» الصورة التالية توضح العنصر .SW1٥C1‏ 


Humbrger 


Am 
ب‎ meat,mayonise 








والكود المطلوب لتعريف 1١٥1ء‏ كما يلي: 
ourWidgetFile.dart‏ 


class ourWidget extends StatefulWidget { 
Goverride 
State<StatefulWidget> createState() 1 
// TODO: implement createState 
return new _Buildstate () ; 


} 
} 


class _Buildstate extends State<ourWidget> 
{ 
String names= ''; 
0 معت‎ 2210© 
Widget build (BuildContext context) 1 
// TODO: implement build 
return new Scaffold ( 
appBar : new AppBar ) 
backgroundColor: Colors. blue, 
title: new Text ("MyAPP"), 
), 
body: new Container ( 
child: new Column ( 
children: <Widget>[ 
new SwitchListTi le ( 
value: true, 
onChanged: null, 
activeColor: Colors. greenAccent,), 
new SwitchListTile (value: true, 
onChanged: null, 
title: new Text ("Humbrger") , 
secondary: new Icon (Icons.adb) ,subtitle: 
Text ("meat,mayonise,luttce..."),) 


1, 
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و 
0 
٠‏ الشريط الجانبي 1ع10135: 


هو الشريط المستخدم غالبا لإظهار خيارات المستخدم وملفه الشخصي ويكون موجود في الصفحة 


الرئيسية للبرنامج. الصورة التالية تبين عنصر 1013771 يحوي داخله بعض العناصر. 


IEEE 
2 





لإنشاء عنصر من نوع Drawer‏ نكتب الكود التالي: 
ourWidgetFile.dart‏ 


class ourWidget extends StatefulWidget { 
Goverride 
State<StatefulWidget> createState() 1 
// TODO: implement createState 
return new _Buildstate () ; 


} 


} 
class _Buildstate extends State<ourWidget> 
{ 
String names= ''; 
Goverride 
Widget build (BuildContext context) { 
// TODO: implement build 
return new Scaffold ( 
drawer: new Drawer ( 
child: new Container ( 
color: Colors. blue, 
padding: Edgelnsets.all (12.0), 
child: new Column ( 
mainAxisAlignment: MainAxisAlignment. center, 
children: <Widget>[ 
Padding (padding: Edgelnsets.only (bottom: 25)), 
new Text ('MyAcount'), 
Padding (padding: Edgelnsets.only (bottom: 25)), 
new Text ('Edit'), 
Padding (padding: Edgelnsets.only (bottom: 25)), 
new Text ('Exit'),] 


appBar : new AppBar ) 
backgroundColor: Colors. blue, 
title: new Text ("MyAPP"), 


), 


body: new Container ( 


), 
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:(Alert Dialog) Notification D1a10£ رlوحلا مربع‎ 


هو مربع رسالة لتنبيه المستخدم لأجراء معين مع إمكانية إعطائه عدة خيارات. 


Exit 


Da you want to LXIt 





يجب أن تعلم ان مربع الحوار لا يستخدم إلا عند اعلام شيء ما أو سماحية المستخدم لاتخاذ القران 


ومنه هذا المربع يستدعى دوما عن طريق تابع أو طريقة ما. 
ourWidgetFile.dart‏ 


import 'Package: flutter/material.dart'; 
import 'dart:io'; 
class ourWidget extends StatefulWidget { 
Goverride 
State<StatefulWidget> createState() 1 
// TODO: implement createState 
return new _Buildstate () ; 


} 
} 


class _Buildstate extends State<ourWidget> 
{ 
String names= ''; 
Goverride 
Widget build (BuildContext context) { 
// TODO: implement build 
return new Scaffold ( 
appBar : new AppBar ) 
backgroundColor: Colors. blue, 
title: new Text ("MyAPP"), 


), 
body: new Container ( 
child: new FlatButton (onPressed: () {DialogBuild (context) ;}, 
child: new Text("Exit") ) 


), 
(7; 





ننوه ان التابع (1)0×ءع للخروج من البرنامج موجود في المكتبة 0316:10. 


تأليف فيصل الأسود | مهندس برمجيات 
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بقي لدينا انشاء الدالة ()10(121081311110)6011667 والتي تقوم ببناء مربع التنبيه عند طلبها وإظهاره. 


ourWidgetFile.dart 


Future<Null> DialogBuild (BuildContext context) async { 
return showDialog<Nul1l> ( 
context: context, 
barrierDismissible: false, 
builder: (BuildContext context) { 
return new AlertDialog ( 
title: new Text("Exit"), 
content: new SingleChildScrollView ( 
child: new ListBody ( 
children: <Widget> [ 
new Text("Do you want to Exit"), 
1, 
), 
), 
actions: <Widget>[ 
new FlatButton ( 
onPressed: () { 
Navigator.of (context) .pop )( ; 
}, 
child: new Text("No")), 
FlatButton ( 
onPressed: )( { 
exit (0) ; 
}, 
child: new Text("Yes")), 





مربع الحوار البسيط 5115161(0121085: 
هو رسالة مشبهة ل مربع الحوار العادي إلا أنها تقدم مجموعة من الخيارات لتساعد المستخدم على 


الاختيار ولا تتطلب تعقيد برمجي. 


options 


No 
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والكود التالي لإنشاء تابع (دالة) يبني مربع الحوار البسيط 


ourWidgetFile.dart 


Future simpleShowSimpleDialog (BuildContext context) async { 
switch (await showDialog (context: 


context, builder: (BuildContext 
context) { 
return new SimpleDialog ( 
title: new Text ('options'), 
children: <Widget>[ 


new SimpleDialogOption (child: new Text ('No'), 
onPressed: () { 


Navigator . pop (context) ; 
,م‎ 
new SimpleDialogOption (child: new Text('Yes'), 
onPressed: () { 
exit (0) ; 
}) 





© القاکہة اJسفlةã :Bottom sheet‏ 
تشبه ال 1013161 إلا أنها تظهر في الأسفل: 
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والكود التالي لإنشاء قائمة من نوع أع801]011516 , كما أنها تشكل ضمن تابع مستقل أيضا 
وتستدعى عند الطلب. 


ourWidgetFile.dart 
Bottomsheetopen (BuildContext context) async { 


await showModalBottomSheet (context: context, 
builder: (BuildContext context) { 
return new Container ( 
height: 300, 


child: new Row ( 
mainAxisAlignment: MainAxisAlignment. center, 
children: <Widget>[ 
new Text ('First'), 
new Text ('Second'),], 
), // Row 
); 


; // container 





: card layout J| ® 


إحدى العناصر المهمة فی ۴11٤٤٤۲‏ لکونه يساعدنا على إنشاء مثل البطاقات التى تحوى تخاصب 
هو ! ئى صر في ي دحوي 


عن معلومات عدة أنواع. 






من المؤكد أن البطاقات يمكن ان تأخذ كامل عرض الشاشة. 


يمكنك الحصول على شرح لكامل محتويات الكتاب على قناة ال 66ل أناه/ا 
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يمكن إنشاء مثل هذا النوع من ال ]137011 كما في الكود التالي: 


ourWidgetFile.dart 


class _Buildstate extends State<ourWidget> { 
String names = ''; 
Goverride 
Widget build (BuildContext context) 1 
// TODO: implement build 
return new Scaffold ( 
appBar: new AppBar (), 
body: new Container ( 
child:new Column ( 
children: <Widget>[ 
new Card( 


color: Colors. amber, 
child: new Column ( 


children: <Widget>[ 
new Text ('card'), 
new RaisedButton (onPressed: null,child: new Text ("Click 


1, 
), 


), 


new Card( 


color: Colors. amber, 
child: new Column ( 
children: <Widget>[ 
new Text ('card'), 
new RaisedButton (onPressed: null,child: new Text ("Click 





©» دائرة المستخدم Circle Avatar‏ 
هي غالبا دائرة تستخدم لوضع صورة المستخدم مع معلوماته أو صورة أي عنصر مع معلوماته كما 
في الصورة. 











يمكنك الحصول على شرح لكامل محتويات الكتاب على قناة ال 66ل أناه/ا 


لد 
StackOverFlow Arabi‏ = 








child: new CircleAvatar ( 


child: new Text('Name'), 
backgroundColor: Colors.pink, 
foregroundColor: Colors. white, 
radius: 50, 





©» العنصر V1eW‏ ]15ءآ: 
هذا العنصر يستخدم لعرض مجموعة من العناصر على شكل قائمة بعدد لا نهائي من السجلات 
ويمكننا الاطلاع على السجلات بالتحريك للأعلى والأسفل كما في الصورة. 






Title 1‏ مكنا 


I'm leading 1 
I'm subtitle 1 
I'm leading 2 im Title 2 
I'm subtitle 2 





كل عنصر في هذه القائمة يسمى 11561116 ويأخذ شكل معين حسب تصميمكء. غالبا له الشكل 
التالى: 


ee 


Title 
subtitle 


leading 








:11۲۷ 1٥W والكود التالى لإنشاء‎ 
child:new ListView ( 


children:<Widget> [new ListTile ( 
title: new Text("I'm Title 1"), 
subtitle: new Text("I'm subtitle 1"), 
leading: new Text("I'm leading 1") 


), 


new ListTile ( 
title: new Text("I'm Title 2"), 
subtitle: new Text("I'm subtitle 2"), 
leading: new Text("I'm leading 2") 
)1,// ListTile 





تأليف فيصل الأسود | مهندس برمجيات 
يمكنك الحصول على شرح لكامل محتويات الكتاب على قناة ال ما ۷Y٥u†u‏ 


لد 
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القوالب الجاهزة 5623110101 
هي 5اء771085 جاهزة تقدمها 1'111]161 تساعد في بناء واجهات قوية دون الخوض في عناء تصميم 
الواجهات. 


الصور التالية تبين مجموعة قوالب جاهزة 


8 فا أه' له O mB‏ © + 


(e) 
ف‎ 





ShoppingList 





Expansion Tile 


[J Very tasty bananas 





Chapter A نيه‎ 
4و‎ A bit of Blueb Pi 
it of Blueberry Pie REF 
][ Oven-Baked Lime Scallops Chapter B 
Fragment 1 
Chapter C ب‎ 
4 Fragment 2 
Fragment 3 
:AppBar ° 


المثال التالي لصنف مستخدم قوالب ال ٥1d‏ اcaء‏ القالب 82aصApp‏ 
1110 


import 'package:flutter/material.dart'; 


class MyColumn extends StatelessWidget { 
Goverride 
Widget build (BuildContext context) { 
return new Scaffold ( 
appBar :new AppBar ( 
Lille: new Text ('AppBar Title'), 
backgroundColor : Colors.greenAccent, 
actions : <Widget> | 


new [conButton (icon :new Icon(lcons.adb), 
onPressed : (){} ), 
new IconButton (icon:new Icon (Icons.verified user), 
onPressed: (0{}, 





ويكون ناتج البرنامج عبارة عن تطبيق يستخدم ال 821 مم۸ اءعل1س. التي تظهر شريط في أعلى 
البرنامج مع مجموعة اوامر معينة على شكل أيقونات كما في الشكل التالي. 


تأليف فيصل الأسود | مهندس برمجيات 
يمكنك الحصول على شرح لكامل محتويات الكتاب على قناة ال Youtube‏ 
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StackOverFlow Arabi 
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كما يمكن إضافة أحداث لتلك الأيقونات عن طريق تعريف تابع داخل الصنف واستدعاء هذا التابع 


بالشكل التالي: 


new IconButton (icon: new Icon (Icon.alarm) , 
onPressed: myFunction) , 


وهنا نحتاج الى دالة 12:1"02105 ضمن الصنف لتنفيذ الامر المطلوب ويمكن انشاء دالة مجهولة 


مباشرة كما يلي: 





new IconButton (icon: new Icon (Icon.alarm) , 


onPressed: () { //write code here}), 





يمكنك الحصول على شرح لكامل محتويات الكتاب على قناة ال ما ۷Y٥u†u‏ 


2 
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كما يمكنك وضع widgets‏ داخل جسم Scaffold JI Body‏ وهنا يمكن وضع أجزاء جديدة فئ 
الواجهة في الكود التالي جزء من كود ال ]171086 داخل ال 50311010 وبالتحديد خاصة (([800 ثم 
إنشاء نص من نوع معين 101657611 وهو نص عادي قابل للاستجابة للأحداث وقد تم ربطه بحيث عند 


الضغط عليه يخ ينفذ تابع معين. 


import 'package: flutter/material.dart' ; 


class MyColumn extends StatelessWidget { 
6 مع‎ 2230© 
Widget build (BuildContext context) 1 
return new Scaffold ( 
body: new Container ( 
alignment : Alignment. center, 
child : new Column ( 
malnAxisAlignment : MainAxisAlignment. center, 
children:<Widget> [ 
new InkWell ( 
child: new Text ('Press Me'), 
onTap: () {print ('Hello');}, 
( ,[ 


appBar :new AppBar ( 


title: new Text ('AppBar Title'), 
backgroundColor : Colors. greenAccent, 
actions : <Widget> [ 
new IconButton (icon :new Icon (Icons.adb) , 
onPressed : null ), 
new IconButton (icon:new Icon (Icons. verified user), 
onPressed:null), 
1, 
) 
); 
} 
} 





يمكنك الحصول على شرح لكامل محتويات الكتاب على قناة ال ما ۷Y٥u†u‏ 


StackOverFlow Arabi 


2 
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»ء شريط التصفح :.Navigation Bar‏ 
يمكن إنشاء 131 1125715211011 80110111 بسهولة عن طريق 502110101 كما في الشكل وإعطاء 


كل زر حدث يستجيب له. 








وكا 
import 'package:flutter/material.dart';‏ 


class MyColumn extends StatelessWidget { 
Goverride 
Widget bulld (BulildContext context) { 
return new Scaffold ( 
bottomNavigatlionBar:new BottomNavigatlionBar (items: [ 
new BottomNavigatlonBarltem (icon: new 
ICON(ICORNS ACCESS GlAFMS), TICLE: Rew Text{( BUS’ ));, 
new BottomNavigatlonBarltem (icon: new 
Icon (Icons.ac unit), tLitle:new Text('adb')) |, 
onTap: (int x) => print ('index $%$x'), 
type: BottomNavigatlonBarType. fixed,), 


appBar :new AppBar ( 


Litle: new Text ('AppBar Title'), 
backgroundColor : Colors.greenAccent, 
actions : <Widget> [ 

new I[conButton (1icon :new Icon(Icons.adb), 
onPressed : null ), // Iconl 
new IconButton (icon:new Icon (Icons.verified user), 
onPressed:null), 





يمكنك الحصول على شرح لكامل محتويات الكتاب على قناة ال ما ۷Y٥u†u‏ 


2 
= StackOverFlow Arabi 
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والناتج يكون: 








الزر العاڌa :Floatting Button‏ 
هو زر يظهر في زاوية الشاشة وغالبا يساعد في العمليات التكرارية كما في الصورة 
الكود التالي يبين طريقة إنشاء "زر عائم" كما يلي مع إعطائه استجابة لحدث معين: 


AL 








هنا عند الضغط على الزر سوف يطبع في I am float button ö)lye console JI‏ 


يمكنك الحصول على شرح لكامل محتويات الكتاب على قناة ال 66ل أناه/ا 


StackOverFlow Arabi 


= 
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كما في الكود التالي: 
1110 
import 'package: flutter/material.dart' ;‏ 


class MyColumn extends StatelessWidget { 
6 مع‎ 2231© 
Widget build (BuildContext context) { 
return new Scaffold ( 
floatingActionButton: new FloatingActionButton ( 
onPrcessed : () {print('I am float button');}, 
child : new Icon (Icons.adb) , 
backgroundColor: Colors. blue 
), // floating ActionButton 


appBar :new AppBar ( 
title: new Text ('AppBar Title'), 
backgroundColor : Colors. greenAccent, 
actions : <Widget>[ 
new IconButton (icon :new Icon (Icons.adb) , 
onPressed : null ), /⁄// Icon1 
new IconButton (icon:new Icon (Icons. verified user), 
onPressed:null), 
1, 
) 
); 





۰ التصميم ©0112): 
تتيح لنا منصة 560010 11101161 على الانترنت تصميم واجهات عن طريق أدوات وازرار يمكنك 
الوصول لتلك المنصة عن طريق الرابط: 
010.26 1ك 00ط1 











يمكنك الحصول على شرح لكامل محتويات الكتاب على قناة ال 66ل أناه/ا 
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التصفح والتوجيہ Navigat10n‏ 


في هذا القسم من الكتاب سوف نركز على كيفية التنقل بين الصفحات أو الواجهات وهذا ما يسمى 


بمفهوم ال 25715211012/[. 


AppBar Title 


Username: 


Username 


Password: 


Password 











في مثالنا التالي لدينا واجهتين سوف ننتقل من الواجهة الأولى (الأساسية) إلى الواجهة الثانية 
باستخدام مفاهيم التصفح. 


يمكنك الحصول على شرح لكامل محتويات الكتاب على قناة ال 66ل أناه/ا 


2 
= StackOverFlow Arabi 











77 


بالبداية سوف نشكل صنف 1355© لكل واجهة ونبني ضمنها التصميم الصحيح » ثم نكتب التابع 
0 كما يلي مستعينين بصنف ثالث يحدد لنا المسارات: 


main.dart 


import 'package: flutter/material.dart' ; 
import 'package:navigationProject/ PageOneFile.dart'; 
import 'package:navigationProject/PageTwoFile.dart'; 
void main () { 

runApp (new MaterialApp ( 

home: new MyApPp () ) 

); 
} 
class MyApp extends StatefulWidget { 


0 مج‎ 2210© 
State<StatefulWidget> createState() { 
// TODO: implement createState 
return new _MyApP () ; 
} 
} 
class _MyApp extends State<MyApp> { 
dGoverride 
Widget build (BuildContext context) { 
// TODO: implement build 
return new MaterialApp ( 
title: 'Navigation', 
routes: <String, WidgetBuilder> { 
'/First': (BuildContext context) => new PageOne(), 
' /Second': (BuildContext context) => new PagelIwo(),}, 
home: new PageOne()); 
} //MaterialApp 
} 


2 7 LEG 
5 











تأليف فيصل الأسود | مهندس برمجيات 
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ونكتب كود الصنفين بحيث الأول يطلب الثاني والثاني يطلب الأول 


الصنف الأول: 


PageOneFıle.dart 


import 'package: flutter/material.dart'; 
class PageOne extends StatefulWidget { 
Goverride 
State<StatefulWidget> createState() { 
// TODO: implement createState 
return new PageOne(); 


} 
} 


class PageOne extends State<PageOne> { 
Goverride 
Widget build(BuildContext context) { 
// TODO: implement build 
return new Scaffold ( 
appBar: new AppBar ( 
title: new Text ("page 1"), 
), 
body: new Container ( 
child: new Column ( 
children: <Widget> [ 
new RaisedButton ( 
onPressed: )( { 
Navigator.of (context) .pushNamed (' /Second') ; 
}, 


child: new Text ('next') ) 





والصنف الثاني: 
PageOneFıle.dart‏ 


import 'package: flutter/material.dart'; 
class PagelTwo extends StatefulWidget { 
Goverride 
State<StatefulWidget> createState() { 
// TODO: implement createState 
return new Pagelwo(); 
} 
} 


class Pagelwo extends State<PageTwo> { 
Goverride 
Widget build(BuildContext context) { 
// TODO: implement build 
return new Scaffold ( 
appBar: new AppBar ( 





تأليف فيصل الأسود | مهندس برمجيات 
يمكنك الحصول على شرح لكامل محتويات الكتاب على قناة ال 66ل أناه/ا 
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title: new Text ("page 2"), 
) 7 
body: new Container ( 
child: new Column ( 
children: <Widget> | 
new RaisedButton ( 
onPressed: )( { 
Navigator.of (context) .pushNamed ('/First'); 


و 
child: new Text ('Back') )‏ 





نلاحظ بالخاصية 1011165 بنينا موجها للصفحات وكما في الخاصة 10126 وضمنها الصفحة 
0 كصفحة أولى. 

نلاحظ عند الانتقال للصفحة الثانية ظهور زر الرجوع أوتوماتيكياً وهذا ما يوفره ال 52211010 
بالطريقة .Push Named‏ 


ت 7 ا 





يمكن عدم إظهار هذا الزر باستخدام طريقة تصفح أخرى هي كما في الكود التالي: 
onPressed: () 1‏ 


Navigator.of (context) . 
pushNamedAndRemoveUntil (' /Second' , (Route<dynamic> route) => false); 


}, 





وهنا عند الذهاب من الصفحة الأولى إلى الصفحة الثانية لن يظهر زر الرجوع أما في باقي حالات 
هناك أيضا طريقة للرجوع للصفحة السابقة كما يلي: 


onPressed: )( 1 


: () مههم. (غععدعع ده ) يه . 2135310302 


}, 





تأليف فيصل الأسود | مهندس برمجيات 
يمكنك الحصول على شرح لكامل محتويات الكتاب على قناة ال ما ۷Y٥u†u‏ 
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وهي تنوب تماما عن زر الرجوع في حال كانت إمكانية الرجوع مقبولة أي أرسلت بالطريقة 
21151721260 وللتحقق من هذا يجب كتابة الكود السابق بالشكل: 


onPressed: )( 1 


if (Navigator.of (context) .canPop () ) 


{ 
Navigator. of (context) .pop () ; 


} 
} 





ملاحظة: تستخدم عملية منع الرجوع كما في حالات صفحة ال 1.0812 حيث لا يسمح للمستخدم 


بالرجوع إليها مرة أخرى. 


تبادل القيم والمتغيرات بين الصفحات: 
تبادل القيم والمتغيرات بين الصفحات: 
رأينا في الفقرة السابقة كيف يمكن الانتقال بين الصفحات ولكن ماذا لو أردنا أن نرسل قيم من 


صفحة إلى أخرى. 
هناك طريقتين للقيام بذلك: 


ه الطريقة الأولى: ارسال القيم عن طريق الباني للصفحة 1عا6015]110. 


في البداية يجب استخدام التابع التالي للتنقل كما في الكود: 


toPageTwo (BuildContext context) { 
Navigator.push (context, new Material PageRoute (builder : 
(BuildContext context) 


=> new PagelIwo ("hello") 


J(7 
} 





يمكنك الحصول على شرح لكامل محتويات الكتاب على قناة ال ما ۷Y٥u†u‏ 


> StackOverFlow Arabi 





س 
00 


ويكون شكل التابع للصفحة الأولى كما في الكود التالي: 


PageOneFıle.dart 


import 'package:firebase_tutorial/PageTwoFile.dart' ; 
import 'package: flutter/material.dart'; 


class PageOne extends StatefulWidget { 
Goverride 
State<StatefulWidget> createState() 1 
// TODO: implement createState 
return new _PageOne() ; 
} 
} 


class _PageOne extends State<PageOne> { 
0 معت‎ 2210© 
Widget build (BuildContext context) 1 
// TODO: implement build 
return new Scaffold ( 
appBar: new AppBar ) 
title: new Text ("page 1"), 
), 
body: new Container ( 
child: new Column ( 
children: <Widget>[ 
new RaisedButton ( 
/*onPressed: () 1 
Navigator. of (context) .pushNamed ('/Second'), 
,*/ 


/*onPressed: () 1 


Navigator. of (context) . 


pushNamedAndRemoveUnti1l (' /Second' , (Route<dynamic> 
route) => false), 


J, */ 
onPressed: )( { 
toPageTwo (context) ; 


}, 


child: new Text('next') ) 


toPageTwo (BuildContext context) 1 


Navigator.push (context, new Material PageRoute (builder : 
(BuildContext context) 


=> new Page'Two ("hello") 





تأليف فيصل الأسود | مهندس برمجيات 
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هنا أرسلنا العبارة "26110" من الصفحة الأولى إلى الصفحة الثانية وعلينا الآن أن نجهز الصفحة 
الثانية لاستقبال البيانات. 
وهنا عند الضغط على زر معين من الصفحة الأولى سوف تنفذ الطريقة 1022861550 ومنه سوف 


ترسل العبارة "16110" وتقوم الصفحة 5620020 باستقبالها عن طريق الباني. 


ونكتب الصنف الثاني كما في الكود التالي: 
.236170111 


import 'package:flutter/material.dart'; 


class PageIwo extends StatefulWidget { 
String Message; 
PageTIwo (this.Message) ; 
Goverride 
State<StatefulWidget> createState() { 
// TODO: implement createState 
return new _PageTwo (Message) ; 
} 
} 


class _PageIwo extends State<PageTwo> { 
String Message; 
__PagelIwo (this.Message) ; 
Goverride 
Widget build (BuildContext context) { 
// TODO: implement build 


return new Scaffold ( 
appBar: new AppBar ) 
title: new Text ("page 2"), 
), 
body: new Container ( 
child: new Column ( 
children: <Widget>[ 
new RaisedButton ( 
onPressed: () { 
Navigator. of (context) .pushNamed('/First') ; 
}, 
child: new Text('Back') ) 





هنا اعتبرنا ان الصفحة الأولى فقط ترسل للصفحة الثانية وإذا اردنا أن نرسل من الثانية للأولى نشكل 
نفس التابع في الثانية وكذلك ننشئ باني في الأولى لاستقبال البيانات كما فعلنا مسبقا. 


يمكنك الحصول على شرح لكامل محتويات الكتاب على قناة ال 66ل أناه/ا 
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0 
ه٠‏ الطريقة الثانية: نلخص الطريقة الثانية بإنشاء صنف خاص يحوي متحولات ستاتيكية عامة هذا 
المتحولات يمكن تخزين البيانات فيها من قبل الصفحة المرسلة وتقوم الصفحة المستقبلة باستدعاء 


هذه البيانات من الصنف وذلك عن طريق مفتاحها الخاص لعK.‏ 


يمكنك الحصول على شرح لكامل محتويات الكتاب على قناة ال 66ل أناه/ا 


لد 
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التعامل مع 5011 لل 


»© 


مقدمة: 

في البداية دعونا نشرح [0١‏ وما الفائدة منهاء تعد 1501 هي الوسيلة الأفضل للحصول من 
البيانات من المخازن الالكترونية أو مواقع الويب. بحيث علينا طلبها عن طريق رابط يدعى ۸۴1 
خاص لهده البيانات فيعيد لي البيانات مكتوبة بلغة 501ل. 

الحقيقة إن 1501 ليست لغة برمجة إنما هي لغة هيكلة بيانات مثل .1/11 ولكن تساعد جدا في 
فهم كيفية استقبال البيانات من أي موقع. 

كما يجدر الذكر أن هناك العديد من المواقع التي تقدم بيانات جاهزة تساعد المبرمجين في بناء 
التطبيقات منها بيانات عن أسعار العملات او بيانات الطقس. 

يجب أن نعلم أن طلب هذه الخدمة عن طريق 821 الخاص بها يسمح لنا فقط باستعراضها 
وعرضها ضمن تطبیقناء حيث أي ملف 1501 يكتب على شكل كائنات وخصائص لكل خاصية أو 
كائن مفتاح (اسم معين) وقيمة. 

لدينا هنا ملف 1501 يحوي بيانات مستخدمين حيث لكل مستخدم رقم معرف 101 اسم 22126, 


„parents çlçlJl «Address jناونع‎ 


JSON File: data.json 


1d: 1, 
name: "Ahmad", 
Address: "Syria", 
Parents: { 
father: "Mohamad", 
mother: "Nour" 


1d: 2, 
Name: "Farah", 
Address: "Damascus", 
Parents: { 
Father = "Feisal", 
Mother = "Batoul", 





يمكنك الحصول على شرح لكامل محتويات الكتاب على قناة ال ما ۷Y٥u†u‏ 
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يمكن الوصول للمعلومات بالشكل التالي : 


data [0] [Name'] = "Ahmad" 
data [1] ["Parents'] ['Father'] = " Feisal ", 





حيث 01213 ملف ال 1502 الذي لدينا . 


الآن لنعد إلى 1'11]161 ونتعلم كيفية جلب مثل تلك البيانات وعرضها على تطبيقنا. 
بالبداية يجب جلب مكتبة ال10]آ التي تتعامل مع 0 الى مشروعنا كما يلي: 
نفتح الملف 7731121. 2115262 من ضمن ملفات المشروع. 


| Project > 21 بيه‎ 
Images 7 
= apple.jpg 

E ios 


.flutter-plugins 


.gitignore 
.metadata 


.packages 


7 firebase_tutorial,iml 


= pubspec.lock 





| pubspec.yaml 
= README.md 
||| External Libraries 
ilı Dart Packages 
I async-2.0.8 
5] 
s.delegate 
s.result 


s.stream_sink_transformer 











: نضيف فقط السطر 0.12.0+1^ :م٤1 كما في الصورة التالية‎ ٠ 


dencies : 

flutter: 
adk : flutter] 

[irebase database: “2.0.1 

http: “Û0.12.0+1 











٠‏ نضغط اءع ءع2)ءه۴ لاستدعاء المكتبة من الانترنت: 





Packages qet Packages upqrade Flutter upgrade Flutter doctor 





وننتظر حتى اكتمال التحميل. 


يمكنك الحصول على شرح لكامل محتويات الكتاب على قناة ال ما ۷Y٥u†u‏ 
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الطريقة التالية مهمتها جلب البيانات بطريقة 1507 إلى تطبيقنا: 


Future<List> getData () async { 
String url = " our API "; 


http .Response r= await http.get (url) ; 
return json. decode (r.body) ; 


} 





نلاحظ انها متزامنة انها تنتظر قدوم البيانات من الشبكة. 


كما يجب لتطبيق تلك الطريقة استخدام المكتبات: 


import 'dart:convert' ; 


import 'package:http/http.dart' as http; 





مثال: 
ليكن لدينا 471 تعيد لي الكثير من البيانات وأريد وصفها ضمن قائمة. 
سنبداً الآن بكود كامل لحل تلك المشكلة وتظهر لدي البيانات كما في الصورة. 


ان e‏ 
م3 





1 id labore ex et quam 7 


quo vero reiciendis velit 
similique earum 


N 


دن 


odio adipisci rerum aut animi 








import 'dart:async'; 

import 'dart:convert'; 

import 'package:http/http.dart' as http; 
import 'package: flutter/material.dart'; 


void main () async { 
List data = await getData (); 
runApp (new MaterialApp ( 


title: 'Json Example', 
home :new Scaffold ( 


appBar: AppBar ( 


Litle: new Text ('Json') 


body: new Center ( 
child:new ListView.builder ( 
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1temCount: data.length, 
1temBuilder: (BuildContext context, int Position) { 
return new ListlTile ( 
title:new Text ("${data [Position] ['name']|}",style: TextStyle ( 
color: Colors.greenAccent, 
fontSize: 22, 
(,( 


leading: new Text ("${data[Position] ['id']}",style: TextStyle ( 
color: Colors.greenAccent, 


fontSize: 22, 


} 
Future <List> getData() async { 


String url = 'https://]Jsonplaceholder. typicode.com/comments ' ; 


http.Response r= await http.get (url); 
return ]jJson.decode (r.body) ; 


} 
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استدامة البيانات 


توفر فلاتر أكثر من طريقة لحفظ البيانات الخاصة بالتطبيقات أهم هذه الطرق تشمل ما يلي: 
الذاكرة الداخلية (ع5101328 12161121): وفيها يتم تخزين البيانات في الذاكرة الداخلية للتطبيق. 
الذاكرة الخارجية (ع5]015385 181:161021) وفيها يتم تخزين البيانات في الذاكرة الخارجية العامة 
بحيث أي تطبيق يمكن الوصول لها 

التفضيلات المشتركة (5ع©2116167 512160): تشمل حفظ بيانات أساسية بمفاتيحج محددة (-إء) 
«(Value pairs‏ 

قواعد البيانات (كعءئة ط033 ء1[ 50): وفيها يتم تخزين البيانات في قواعد بيانات خاصة 
استخدام أي من هذه الطرق يعتمد على احتياجاتك؛ وكذلك المساحة المطلوبة لتخزين البيانات 


وسيتم تاليا تفصيل كل طريقة على حدى. 


* الذاكرة الداخlليةã (internal St0rage)‏ 
يمكن تخزين البيانات مباشرة في الذاكرة الداخلية للجهان وتكون البيانات مخزنة خاصة بالتطبيق 
الذي تم التخزين من خلاله ولا يمكن للتطبيقات الأخرى الوصول لهذه البيانات. وعند حذف التطبيق 
تحذف معه ملفاته وبياناته مباشرة. 


لإنشاء وتخزين واسترجاع بيانات تطبيق الذاكرة نستخدم الطريقتين الركيسيتين التاليتين. 


عِِ 2 ۶ ¢ 
يجب أن ننوه بالبداية انه كي نستطيع استخدام التخزين يجب ان نضيف حزمة 10 إلى مشروعنا 
بحيث نضيف في الملف 21156©.57:21721 وتحت السطر 611120_10015م11) سطر جديد يحتوي 


Path_Provıder: ^0.4.1‏ ثم نضغط اعع8 ع530128 كما فعلنا مع حزمة [80٩0‏ 


وأيضا نضيف المكتبة 10 للمشروع كما يلي: 


import 'package: flutter/Material.dart'; 
import 'package: Path Provider/Path_ provider.dart'; 


import 'dart:io'; 
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التابع أو الطريقة (10۵٤ء٠)‏ الأولى المستخدم هي ۴1م م4 والتي تعيد مسار تطبيقنا كما يلي: 


Future<String> AppPath () async { 
final path = await gGetApplicationDocumentsDirectory () ; 


return path.path; 





} 


الطريقة الثانية تعيد الملف الذي سنستخدمه لحفظ أو استرجاع الملفات كما يلي: 


Future <File> AppFile() async { 
final file = await AppPath(); 
return new File('$file/dart.txt') ; 





الطريقة الثالثة والتي تكتب على الملف تكون كما يلي: 


Future <Flle> writefile (String data) async 
1 

final file = await (AppFile()); 

return writefile('Ş$data'); 





الطريقة الرابعة وهي قراءة البيانات من ملف: 


Future <String> readFile ()async { 
try { 
final Fille = await (AppFile()); 
String data = await (File.readAsString()); 
} catch (e) 1 


return 'there is N file'; 


} 
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الآن سوف نقوم ببناء كود يقوم بحفظ نص معين داخل ملف عن الضغط على الزر 52۷۴ ويستدعي 
الأمر ويظهره على 13561 عند الضغط على زر 1030 كما في الصورة. 








outputs output out put ِ 


1 4 5 6 7 8 9 0 


qwerty u i op 
TCS OGY OM N KEL 


#4 Zz Xx C م 6 /ا‎ Mm @ 





main.dart 

import 'dart:async'; 

import 'dart:convert'; 

import 'package:http/http.dart' as http; 

import 'package: flutter/material.dart'; 

import 'dart:io'; 

import 'package:path_ provider/path_ provider.dart'; 


Future<String> AppPath() async { 
final path = await GetApplicationDocumentsDirectory (); 
return path.path; 


Future<File> AppFile() async { 
final file = await AppPath(); 
return new File('$file/dart.txt'); 


} 


Future<File> WriterFile (String data) async | 
final file = await (AppFile()); 
return file.writeAsString ('Ş$data'); 


} 


Future<String> ReadFile() async { 
try { 
final file = await (AppFile()); 
String data = await (file.readAsString()); 
return data; 
catch (e) { 
return 'there is N file'; 


final TextEditingController input = new TextEditingController (); 
final TextLEditingController output = new TextEditingController (); 
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void main () async | 
//List data = await getData(), 
runApp (new MaterialApp ( 
title: 'Json Example', 
home: new Scaffold ( 


appBar: AppBar (title: new Text ('Files')), 


body: new Center ( 
child: new Column ( 
children: <Widget> [ 
new TextField (controller: input), 
new TextField (controller: output), 
RaisedButton ( 
child: new Text ("Save"), 
onPressed: () { 
WriteFile (input. text) ; 
}, 
J), 
RaisedButton ( 
child: new Text ("Load"), 
onPressed: () async { 


output. text = await ReadFile(); 
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التفضیلات الnشڌركة (Shared Preferences)‏ 
التفضيلات المشتركة (5ع5113160216161620) هي مكون يوفر حفظ واسترجاع بيانات أساسية 
بسيطة .كل معلومة يتم حفظها يجب أن تكون على شكل مفتاح وقيمة (72106-/(16) بحيث 
يحدد المفتاح (لإع>1) اسم مميز ليتم استعادة القيمة (ع723101) فيما بعد عن طريقه .يمكن 
استخدام التفضيلات المشتركة لحفظ بيانات من الأنواع البدائية (كعمرا 1۷eاصذام)وتشمل‏ : 
floats, ints, longs, and Strings .‏ ,165 00ايتم الاحتفاظ بالبيانات المخزنة من تطبيق ما 


ننوه بالبداية أنه كي نستطيع استخدام التخزين بالتفضيلات المشتركة يجب أن نضيف حزمة 
6-5 إلى مشروعنا بحيث نضيف في الملف 1016566©.7721721آ وتحت السطر 
Cupertino_1CcOonsS‏ سطر جديد يحتوي 

shared_preferences: ^0.5.1+1‏ 
ثم نضغط عع ع28 )cهم‏ كما فعلنا مع حزمة 1501. 
المثال التالي يظهر زر عند الضغط عليه سيجلب قيمة محفوظة بالمفتاح ۲١01ء‏ ويزيد عليها 


واحد ويطبعها على الكونسول ثم يعيد حفظها. واجهة البرنامج هي: 


3 


Increment Counter 
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main.dart 


import 'package: flutter/material.dart'; 
import 'package:shared preferences/shared preferences.dart'; 


vOl1d main() { 
runApp (MaterialApp ( 
home: Scaffold ( 
body: Center ( 
child: RaisedButton ( 
onPressed: بعلت ع قو ا قروم م ا‎ 
child: Text ('Increment Counter'), 


_AMCEEMONECOURNTEF(Y عطؤقة‎ 1 


SharedPreferences prefs = await SharedPreferences.getInstance(); 
int counter = (prefs.getlnt ('counter') ?? 0) + 1; 

print ('Pressed $counter times.'); 

await prefs.setInt ('counter', counter); 
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»ه قواعد البيانات 011]6<: 
تعتبر 501116 (اس كيو لايت ) نظام إدارة قواعد بيانات علائقية مثل .7175001 ) و 
(056876500[1آ1 مضمنة في مكتبة مبرمجة بلغة ) صغيرة الحجم تقريبا ٠:٠٠‏ كليوبايت. 
وخلافا لأنظمة إدارة قواعد البيانات التي تتبع نظام ( عميل - خادم ) فإن محرك اس كيو لايت غير 
مستقل عن البرنامج التي يتخاطب ويتواصل معه. وبدلا عن ذلك في مكتبة اس كيو لايت تربط 
بداخل ذلك البرنامج و هكذا تصبح متكاملة مع البرنامج. ويقوم البرنامج باستدعاء وظائف اس كيو 
لايت بواسطة باستدعاءات داخلية بسيطة مما يقلل الزمن التأخير في الوصول إلى قاعدة البيانات. 
قاعدة البيانات اس كيو لايت تحفظ البيانات و التعريفات والجداول في ملف واحد (قابل للنقل بين 
أنظمة التشغيل) على الجهاز المستضيف. وهذا التصميم البسيط يسمح بقفل ملف قاعدة البيانات 
عند بداية عملية نقل البيانات. 
اس كيو لايت طورها الدكتور ريتشارد هب , و يقدم و يبيع دورات تعلمية عليها و يقدم عقود الدعم 
الفني و الإضافات مثل الضغط و التشفير. 
ومصدر قاعدة البيانات اس كيو لايت مرخص تحت الترخيص الملكية العامة 0012312 1112م 


بحيث يمكنك من استعمالها بحرية من قبل أي شخص لأي غرض كان. 


8Q 1 1)٤ ممیزات‎ 

-دعم معظم مقاييس 501-92 والتي شملت المناقلات قاعدة البيانات والتي تحوي على ثلاثة 
مميزات (إ]4]07011 وتعي قدرة قاعدة البينات على إنجاز كافة المهام أو عدم انجازها بالكامل 
مثل القدرة على نقل الودائع بشكل كامل أو فشلها بالكامل بسبب أي سبب من الأسباب. 

الميزة الثانية 15012660 وهي تعني قدرة التطبيق على جعل المناقلة تظهر منفصلة عن بقية 
العمليات» وهذا يعني أنه لا توجد عملية خارج المناقلة تستطيع باي شكل من الأشكال رؤية البيانات 
في وسط المناقلة. 

الميزة الثالثة 01113616 وهي تعني ضمان أن المناقلات التي تمت بنجاح تبقى حية باستمرار ولا 
تلغى بسبب فشل النظام» مثال ذلك إذا أخبر نظام قواعد البيانات لحجز الرحلات بأن مقعد ما حجز 
بنجاح فإن المقعد سيبقى محجوزا حتى لو انهار النظام. 

-صغر حجمها. 

-سهولة التركيب. 

-سهولة نقل البيانات من مزود إلى آخر. 
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-لا توجد مشاكل بالترميز لا سيما مع اللغة العربية. 
-قاعدة البيانات عبارة عن ملف واحد فقط. 

-تدعم حجم قاعدة البيانات إلى ؟ تيرابايت ٠١44(‏ جيجابايت) - ماقبل الإصدارة ۲,۸ كان الحد 
الأقصى: ١‏ جيجابايت. 

-(شيفرة الاتصال والاستعلام بها سهلة) مشابهة ل .1173:5001 على نحو أبسط. 

-يمكن استخدامها على المواقع التي لا تدعم..1 1/1950 


استدعاء مكتبة :SQLIte‏ 
٠‏ نفتح الملف 7731121. 2115062 من ضمن ملفات المشروع. 
٠‏ نضيف السطر 309 :5011166 ثم نضغط أعع 5ع021228. 


هرمية العمل: 

سوف نعتمد في هذا الكتاب على هرمية .-)1٤۲‏ او ال ٤٥٤1٤‏ ٤۳ھ۴۲٣‏ للتعامل مع قواعد 
البيانات 5001116 والتي تعتبر من أفضل وابسط هرميات هندسة البرمجيات والتي تعتمد على 
تقسيم الكود إلى طبقات حسب وظيفة كل جزء من الكود. 

الشكل التالي يبين الهرمية المتبعة. 
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كما ننشئ ملفات المشروع بشكل يوافق الهرمية كما يلي: 


î flutter_app2 A lUlserstFeisal Aswad ÃAndroıdStudioPro 





Ba lib 
BL 
a UserAPl.dart 
DAL 
a DataBaseHelper.dart 
Models 


a User.dart 
a AddEdıtUlFıle.dart 
a BackupMaın.dart 
a maln.dart 
a VMylUı.dart 
a Pagel .dart 


شرح الطبقات: 

الطبقة .1041: يتم وضع فيها كل كافة توابع الاتصال مع قاعدة البيانات بالإضافة لتابع إنشاء 
القاعدة أول مرة. 

الطبقة 81: يتم وضع فيها كل الأصناف والتوابع التي تقوم بالعمليات من نوع (015171) والتي هي 
(create, read, update, delete)‏ أي جميع العمليات التي يمكن تطبيقها على قاعدة البيانات 
لصنف معین مثلا (مستخدم» موظف» مخزن). 

الطبقة ۴1: يتم فيها بناء واجهة المستخدم التي ستتعامل مع الجدول والأصناف المقابلين لها. 
الطبقة 31006[15: هي طبقة مساعدة تسهل التعامل مع بيانات نوع الجداول فمثلا لدي جدول 


الموظفين فهنا أنشأنا في طبقة ال 11001615 صنف موظف بخصائص معينة. 
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الان لنطبق هذه الهرمي بشكل مفصل وعلى جدول واحد هو جدول المستخدمين ولتسهيل الأمر 
فرضنا لديهم فقط (معرف مستخدم [1 » اسم مستخدم 1156112122 كلمة مرور 02551010) 
بالبداية ننشى الصنف 11561 كما يلي: 

User.dart 


class User { 
int _Id; 
String _Username; 
String _Password; 
User (this._Id, this._Username, this._Password) ; 


INL 06104)( => _1; 
set Id(id) => _Id = id; 


String getUsername () { 
return _Username; 


ا 


setUsername (String username) { 
_Username = username; 


1 


String getPassword() { 
return _Password; 


} 


setPassword(String password) 1 
_Password = password; 


} 





الطبقة 1241 تحوي الصنف 102]3182561161061.012116 والذي يقوم بجميع عمليات الاتصال والإنشاء 

لقاعدة البيانات. 

سنقوم بشرح كل جزء من الكود على حدى. 

أولا استدعاء المكتبات» حيث نجد في بداية الصنف استدعاء لعدة مكتبات كما في الكود: 
'package:path_provider/path_provider.dart';‏ 


'package:sqflite/sqflite.dart'; 
1 package :path/path .dart'; 





والتي ستساعدنا في التعامل مع الملفات - قواعد البيانات و التزامن التابع الأول الذي سنتحدث عنه 


getdb وهو‎ 


static Future<Database> getdb() async { 
LF ( O l5 NOLL} 7 
TE EUEY Ob; 
} else { 


db = await OpenDb(); 


TEL ULI _ 28 


} 
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والذي مهمته أن يقوم بإرجاع قاعدة البيانات في حال كانت موجودة أما في حال كانت غير موجودة 
سيقوم بتحميلها مستدعيا تابع اخر وهو 0060100) 


static Future<Database> OpenDb() async |! 
Directory dir = await gGetApplicationDocumentsDirectory () ; 
String path = join (dir.path, 'Userdb.db'); 


var Userdb = await openDatabase (path, version: 1, onCreate: 
FICO E), 


return Userdb; 





وهذا بدوره سيقوم بالتقاط مسار التطبيق ثم تحميل 102120356 من مسارها في حال وجودها مسبقا 
وعدا ذلك يقوم باستدعاء مرة ثانية لتابع هو ع1'115]01621 والذي يقوم بإنشاء قاعدة البيانات 
المطلوبة. 
static void F'irstCreate (Database db, int version) async ({‏ 
var CreateUserTableStatment =‏ 


"create table User (Id INTEGER PRIMARY KEY AUTOINCREMENT NOT 
NULL, Username Text, Password Text) "; 


await db.execute (CreateUserTableStatment) ; 





والتابع الكلي يكون كما يلي: 


DataBaseHelper.dart 

import 'package:path_ provider/path_ provider.dart'; 
import 'package:sqflite/sqflite.dart'; 

import 'package:path/path.dart'; 

import 'dart:io'; 


class DataBaseHelper { 
52555386 Database db; 


static Future<Database> getdb() async { 
if ( db != null) { 
return _db; 
} else { 
_db = await OpenDb(); 
return _db; 
} 
١ 


static Future<Database> OpenDb() async |! 
Directory dir = await gGetApplicationDocumentsDirectory () ; 
String path = join (dir.path, 'Userdb.db'); 


var Userdb = await openDatabase (path, version: 1, onCreate: 
ل‎ 1 


return 5620 م‎ 
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static void Restart() async |! 
Directory dir = await getApplicationDocumentsDirectory () ; 
String path = join (dir.path, 'Userdb.db'); 
File f = new File(path); 


12+ (!f.existsSync()) { 
deleteDatabase (path) ; 
print ("DataBase has deleted"); 
} 
} 


static void F'irstCreate (Database db, int version) async { 
var CreateUserTableStatment = 
"create table User (Id INTEGER PRIMARY KEY AUTOINCREMENT NOT 
NULL, Username Text, Password Text) "; 


await db.execute (CreateUserTableStatment) ; 


} 


static Future<void> CloseDb() async | 
var db = await Ggetdb(); 
db.close(); 
_db = null; 





إلى هنا نكون قد بنينا تابع مهمته الاتصال والتحكم بقاعدة المعطيات والمطلوب الآن بناء تابع 
115641 والذي مهمته إجراء العمليات على قاعدة البيانات كما ذكرنا وهو موجود ضمن الطبقة 
81 ويحوي جميع التوابع الخاصة بالتعامل مع المستخدم كما يلي: 


UserAP!I.dart 


import 'package: flutter app2/DAL/DataBaseHelper.dart'; 
import 'package: flutter app2/Models/User.dart'; 


class UserAPI { 
static Future<int> AddUser (User user) async | 
var db = await DataBaseHelper.getdb(); 
Map<String, dynamic> UserMap = new Map (); 
UserMap ["Username"]| = user.getUsername (); 
UserMap ["Password"] = user.getPassword(); 
int result = await db.insert ("User", UserMap) ; 


return Û0; 


} 


static Future<List> GetAllUser() async { 
var db = await DataBaseHelper.getdb(); 
String SelectAllUserSstatment = "Select * from User"; 
List result = await db.rawQuery (SelectAllUserStatment); 


return result.toList(); 


} 


static Future<int> EditUser (User user) async { 
var db = await DataBaseHelper.getdb(); 
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Map<String, dynamic> UserMap = new Map (); 
UserMap ["Username"]| = user.getUsername (); 
UserMap ["Password"] = user.getPassword(); 
UserMap ["Id"] = user.getld(); 
int result = await db 
. update ("user", UserMap, where: "Id=?", whereArgs: 
USEF 05866 182( 1] 


return result; 


} 


static Future<int> DeleteUser(int Id) async | 


var db = await DataBaseHelper.getdb(); 


int result = await db.delete ("user", where: "Id=5%5{Id}"); 
return result; 


static Future<void> DeleteAllUser() async | 
var db = await DataBaseHelper.getdb(); 
db.execute ("delete from user"); 





يجب أن نذكر أن أي تابع ينتظر آمرا من خارج التطبيق نضع له 48۷١٠٥‏ وعند طلبه للبيانات نضع 
await‏ ویکون مستقبلي آي .Future Method‏ 


أما بخصوص الطبقة ۴1 فتكون كما يلي: 
MyUı.dart‏ 


import 'package: flutter/material.dart'; 

import 'package: flutter app2/BL/UserAPI.dart'; 
import 'package: flutter app2/Models/User.dart'; 
import 'package: flutter app2/AddEditUIFile.dart'; 


class MyListView extends StatefulWidget { 
Goverride 
State<StatefulWidget> createState() { 
// TODO: implement createState 
return new MyList (); 
} 
} 


class MyList extends State<MyListView> { 


List Users = new List(); 


doverride 
void initState() { 
super.initState (); 
UserAP[1.GetAIlIUser().then ((usrs) 1 
setState(() { 
usrs.forEach((usr) 1 
Users.add (usr); 





doverride 
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Widget build(BuildContext context) { 
return new MaterialApp ( 
home: new Scaffold ( 
floatingActionButton: new FloatingActionButton ( 
ONEFFEeSSEQY (J => NaVIGGLELOANG (CORCOET ع‎ 
child: new Icon(I[Icons.add), 
backgroundColor: Colors.blue), 
appBar: new AppBar ( 
1conTheme: new I[conThemeData ( 
color: Colors.green, 
), 
tLiltle: new Text ('AppBar Title'), 
backgroundColor: Colors.greenAccent, 
), 
body: new Column ( 
children: <Widget> | 
new TextField ( 
decoration: new InputDecoration (hintText: 
"Search") ), 
new Expanded ( 
child: new ListView.builder ( 
1temCount: Users.length, 
1temBuilder: (BuildContext context, int 
position) 1 
return new Card ( 
color: Colors.white, 
child: new ListTile ( 
Litle: new Text ( 


"$ {Users [position] ["Username"]}"), 
subtitle: 
new Text ("Id: 
${Users [position] ["Id"]}"), 
trailing: new Rov ( 
mainAxisSize: MainAxisSize.min, 
children: <Widget> [ 
new [conButton ( 
onPressed: )( { 
_ NavigateToEdIE (eontextL;, 
56513 #لظة‎ 
}, 
icon: new Icon ([Icons.edit, 
color: 
Colors. lightBlue) ), 
new [conButton ( 
onPressed: () => 
016166118672 36156 
position), 
1 :طم‎ new Icon(lcons.delete, 
color: 
Colors. redAccent) ), 


)))7 
} 


void NavigateToEdit (BuildContext context, int position) async { 
String result = await Navigator. push ( 
context, 
MaterialPageRoute ( 
builder: (context) => AddEdQItUI ( 
"Edit", 
new User (Users [position] ["Id"], 
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Users [position] ["Username"], 
Users [position] ["Password"])))); 
RefreshList (); 
ا‎ 


void NavigateToAdd (BuildContext context) async |! 
String result = await Navigator. pushA ( 
context, 
MaterialPageRoute ( 
builder: (context) => AddEdQdItULI ("Add", new User(O0, "", 
ان‎ 
RefreshList(); 
1 


void RefreshList() { 
Users.clear(); 
UserAP[I[.GetAllIlUser().then((usrs) 1 
setState(() 1 
usrs.forEach ((usr) 1 
Users.add (usr); 


VOI. UElELEUSEF(BUILOCONEELE CONTEST, INL DBOSTEIOD) 1 
UserAP1.DeleteUser (Users [position] ["Id"]); 
setState(() { 

Users. removeAt (position) ; 
1 
1 


¥o1d _AddUser (BulldContext context; Int POSITION) { 
UserAP1.DeleteUser (Users [position] ["Id"]); 
setState(() 1 
Users. removeAt (position) ; 
J); 
م‎ 


v¥O1d _EQilLUSerF(BULLOCORNLEXE CORTEX, INL. pPOSLELOD) 1 
UserAP1.DeleteUser (Users [position] ["Id"]); 
setState(() { 

Users. removeAt (position) ; 


Maıin.dart 

import 'package: flutter/material.dart'; 
import 'MyUi.dart'; 

import 'package: flutter _ app2/MyUi.dart'; 


LIST USEF}; 
void main () async | 
runApp (new MaterialApp (home: new MylListView())); 
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ويكون المخطط لمثالنا كما يلي: 


الاق 


DateBaseHelper 





صنف واجهة الإضافة والتعديل كما يلي: 
AddEdıitUIFıle.dart‏ 


import 'package: flutter/material.dart'; 
import 'package: flutter app2/BL/UserAPI.dart'; 
import 'package: flutter app2/Models/User.dart'; 


class AddEdILUL1I extends StatefulWidget { 
User user; 
String command; 
AddEditUI (this.command, this.user) ; 
dGoverride 
State<StatefulWidget> createState () { 
// TODO: implement createState 
return new AddEditUlI (command, user); 
} 


class AddEditUl extends State<AddEditUl> { 
User user; 
String command; 
_AddEditU1I (this.command, this.user) ; 


final _txtUsername = new TextEditingController (); 
final _txtPassword = new TextEditingController (); 


001762213 0> 
void initState() { 
super.initState (); 


1f (command == "Edit") { 
setState(() 1 
__txtUsername. text = user.getUsername (); 
__txtPassword. text user.getPassword() ; 


EF 
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} 


Goverride 
Widget build(BuildContext context) { 
return new MaterialApp ( 
home: new Scaffold ( 
appBar: new AppBar ( 
Litle: new Text (command) , 
backgroundColor: Colors.greenAccent, 
) 
body: new Center ( 
child: new Column ( 
crosSsAxisAlignment: CrossAxisAlignment.stretch, 
children: <Widget> [ 
255300356 ) 
padding: Edgelnsets.all (5), 
) 
new Text ( 
"Username:", 
style: TextStyle ( 
fontSize: 25, 
), 
textAlign: TextAlign.left, 
) 
Padding ) 
padding: Edgelnsets.all (5), 
J), 
new TextField ( 
controller: _txtUsername, 
decoration: new InputDecoration (hintText: "Username"), 
56161 TeXlSEYLE(FONESI12Ee: 2U, COLO COlOES.OloCEy, 
) 
Padding ( 
padding: Edgelnsets.all (5), 
) 
Padding ( 
padding: Edgelnsets.all (5), 
) 
new Text ( 
"DPpassword:", 
style: TextStyle ( 
fontSize: 25, 
) 
textAlign: TextAlign.left, 
) 
Padding ( 
padding: Edgelnsets.all (5), 
J), 
new TextField ( 
controller: _txtPassword, 
decoration: new InputDecoration (hintText: "Password"), 
SLVLG: TexXlLSEVLE{FONESIZEY 2U, COLO? 61628 51 
), 
Padding ( 
padding: Edgelnsets.all (5), 
) 
new RaisedButton ( 
onPressed: () => AddOrEdit 0), 
child: new Text (command) , 
color: Colors.greenAccent, 
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} 


void AddOrEdit() { 
if (_txtUsername.text.length > 0 && _txtPassword. text. length > 0) { 
1f (command == "Add") { 
UserAPI. AddUser (new User (Û0, _txtUsername. text, 
__txtPassword. text) ); 
} else { 
UserAP1.EditUser ( 


new User (user.getld(), _txtUsername. text, 
__txtPassword. text) ); 


} 


Navigator. pop (context) ; 





وواجهة التطبيق بالكامل تكون: 


46 
21 ف ا 
ب 


ا © 
ا س 







AppBar Title 
Search 


Username: 


ahmad Username 


ld: 294 


Password: 


Password 











واجهة الإضافة والتعديل واجهة عرض المستخدمين 
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التعامل مع الصور 


مقدمة: 
تتيح لنا فلاتر بسهولة الية للتعامل مع الصور سواء اكانت مخزنة في الاستديو او التقاطها من 
الكاميرا مباشرة. 


كما يوفر المحاكي في الاندرويد استديو كاميرا افتراضية وهمية لاختبار عمل الكاميرا داخل التطبيق. 
استدعاء مكتبة 1ع0101: 


قد يتيح لنا الصنف 1ع1 117386712 في 1111161 التعامل وجلب أي نوع من الصور أو التقاطها من 


الكاميرا ويجب أن نعلم ان التوابع ضمنه متزامنة لذلك يجب تكتب أيضا ضمن توابع متزامنة. 


مثال تطبيقي: 
التابع التالي بسيط جدا يتيح عند استدعاءه جلب صورة من الاستديو ووضعها ضمن كائن 1:16 ومن 


ثم وضعه في ۲ء۷112 لعرض الصور. 


picker () async{ 
File img =await ImagePicker.pickImage (source: ImageSource.gallery) ; 
1f (img '!'=null) { 
111306-1-110 : 
setState(() 1 





نلاحظ أن التابع تعامل مع ملفات النظام وهنا يجب أن تقوم بتضمين مكتبة ال 10 في استدعاء 
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الان نكتب ملف الواجهة كاملا وعند الضغط على الزر ضمنها سيأخذنا إلى الاستديو لجلب الملف 


وسيضعه في 112٤۲‏ لإظهار الصور وهي 1138٤‏ كما في الكود التالي: 


CameraU1.dart 


import 'package: flutter/material.dart'; 
import 'dart:io'; 
import 'package: image_picker/image_picker.dart'; 


class CameraUi extends StatefulWidget { 
Goverride 
State<StatefulWidget> createState () { 
// TODO: implement createState 
return CameraUi (); 
} 
} 


class CameraUi extends State<CameraUi> { 
File image; 
picker () async { 
File img = await ImagePicker.pickImage (source: 
ImageSource.gallery) ; 
if (img != null) { 
image = img; 
CES LALO UP 


} 


Goverride 
Widget build(BuildContext context) { 
// TODO: implement build 
return new Scaffold ( 
appBar: new AppBar (title: new Text ("ImageDemo")), 
body: new Center ( 
child: image == null ? Text ("There Is No Image") 
Image. file (image) , 
J), 
floatingActionButton: new FloatingActionButton ( 
onPressed: picker, 
child: new Icon (I[cons.add) , 





والتابع 11312 بالشكل التالي: 


main.dart 


import 'package: flutter/material.dart'; 
import 'package: image_demo/CameraDeal.dart' ; 


void main() { 
runApp (new MaterialApp (home: new CameraUi(),)); 


} 
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الآن ماذا لو اردنا 0 نتعامل مع الكاميرا بشكل مباشر هنا يجب أت نستدعي نفس الصنف والتابع 


لکن بدلا من استدعاءه من أجل الاستديو نختار ال 6312618 ويكون بالشكل التالي 


picker () async { 
File img = await ImagePicker.pickImage (source: ImageSource.camera) ; 
if (img != null) { 
image = img; 


setState(() {}); 





نود أن ننوه أن المحاكي يتيح لنا بيكة تصوير افتراضية فعند تشغيل البرنامج والتقاط صورة 
باستخدام الكاميرا ستظهر بالشكل التالي وكأن الكاميرا تعمل: 


Android Emulator - Nexus_5X_AP|_P:5554 
1:59 87# عط‎ 


ARCore 


Entering camera mode 


Hold X. Option to control camera via the 
following methods: 


|7 
we Rotate with mouse 


LE TD IUDLCDLG E 


Don't remind me again‏ اعد 
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الاشعارات الداخلية 
یتیج ٥١‏ )٤1ا۲1‏ إمكانية اشعار المستخدم بسلاسة كبيرة عن طريق حزمة Flutter-local-n10{1f1c4101‏ 


والتي تقوم عند حدث معين بإشعار المستخدم بالشكل التالي: 


مثال تطبيقي: 
في مثالنا التالي سنقوم بإنشاء زر عند الضغط عليه سيقوم بإشعارنا بانه تم الضغط على الزٍْ. كذلك 


سنقوم بوضع الاستجابة عند الضغط على هذا الاشعار. 


التابع التالي هو لتهيئة عمليات الاستشعار لكلا النظامين 81701010 و 1005 


FlutterLocalNotificationsPlugin flutterLocalNotificationsPlugin; 


Goverride 
vOid initState() { 

// TODO: implement initState 

super.initState () ; 

flutterLocalNotificationsPlugin = new 
FlutterLocalNotificationsPlugin () ; 

var android = new 
AndroidInitializationSettings (' Gmipmap/ic_launcher') ; 

var ios = new IOSInitializationSettings () ; 

var initSettings = new InitializationSettings (android, ios); 

flutterLocalNotificationsPlugin.initiali ze ( 

initSettings, onSelectNotification: clickOnNotification ); 





أما التابع 510181310162110 فيمكن بناءه بعدة طرق ولكننا سنبنيه بالشكل التالي: 


showNotification () async { 
var android = new AndroidNotificationDetails ( 
"channellId", "channelName", "channelDescription" 
,Priority: Priority.High, importance: Importance. Max) ; 
var 10S = new IOSNotificationDetails () ; 


var platform = new NotificationDetails (android, i0S) ; 


await flutterLocalNotificationsPlugin. show ( 
0, 'Hello World, 'StackOver Flow Arabi, platform,payload: 
Notification) ; 


} 
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Android 
© 8 


Sat, Mar 10 


O Android System 
USB debugging connected 
Tap to disable USB debugging 


O Android System * USB charging this device ¥ 





نلاحظ في الصورة النصوص المكتوبة في الأعلى ومواضعها في الإشعار أما في خصوص العبارة 
0 فهي ستظهر عند الضغط على هذا الاشعار ويكون تنفيذ طلب محتوى الاشعار بالتابع 
التالي 


e 


showNotification () async { 

var android = new AndroidNotificationDetails ( 
"channelId", "channelName", "channelDescription", 
priority: Priority.High, importance: Importance. Max) ; 

var 10S = new IOSNotificationDetails () ; 

print ("jhj") ; 

var platform = new NotificationDetails (android, i0S) ; 

await flutterLocalNotificationsPlugin. show ( 
0, 'Notification 1', 'Notification 2', platform, 
payload: 'Send Messages'); 





٣ 4 مج‎ ۰ «٠ 
وهكذا نكون قد فهمنا كل جزء من أجزاء البرنامج المطلوب ويكون برنامجنا كاملا.‎ 
import 
"package: flutter local notifications/flutter local notifications.dart"; 


import "package: flutter/material.dart' ; 
import 'dart:async'; 


class MyHomePage extends StatefulWidget { 

©2210 معت 0 

_ MyHomePageState createState () => new _MyHomePageState () ; 
} 


class _MyHomePageState extends State<MyHomePage> { 
FlutterLocalNotificationsPlugin flutterLlLocalNotificationsPlugin; 


dGoverride 
vOid initState() { 
// TODO: implement initState 
super.initState () ; 
flutterLocalNotificationsPlugin = new 
FlutterLocalNotificationsPlugin () ; 
var android = new 
AndroidInitializationSettings (' G(mipmap/ic_launcher') ; 
var ios = new IOSInitializationSettings () ; 
var initSettings = new InitializationSettings (android, ios); 
flutterLocalNotificationsPlugin.initialize (initSettings, 
onSelectNotification: clickOnNotification) ; 
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} 


Future clickOnNotification (String payload) { 
debugPrint ('print payload : Ş$payload') ; 
showDialog ( 

context: context, 
builder: (_) => AlertDialog ( 
title: new Text('Notification'), 
content: new Text (' Ş$payload'), 
), 
); 
} 


0 معت‎ 2210© 
Widget build (BuildContext context) 1 
return new Scaffold ( 
appBar: new AppBar ( 
title: new Text('Local Notification’), 
), 
body: new Center ( 
child: new Column ( 
mainAxisAlignment: MainAxisAlignment. center, 
children: <Widget>[ 
new Text ( 
'Click Button', 
), 
new RaisedButton ( 
child: Text('Click me'), onPressed: showNotification) 


showNotification () async { 

var android = new AndroidNotificationDetails ( 
"channelId", "channelName", "channelDescription", 
priority: Priority.High, importance: Importance. Max) ; 

var 10S = new IOSNotificationDetails () ; 

print ("jhj") ; 

var platform = new NotificationDetails (android, i0S) ; 

await flutterLocalNotificationsPlugin. show ( 
0, 'Notification 1', 'Notification 2', platform, 
payload: 'Send Messages'); 
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الحركة Animation‏ 
مقدمة: 
تقدم حزمة 1'111]161 41211126101 مكتبات جاهزة معها لإنجاز حركات قوية,» حيث تعطي الحركة 


للواجهة قوة وحيوية. 


معظم الحركات في 110111617 تعتمد على الصنف 61110121101 الموجود في المكتبة المضمنة 
افتراضيا: 


‘package: Flutter/animation.dart' 


والتي تحوي الكثير من الحركات الجاهزة والتوابع القوية. 


إن النمط الهيكلي لأي حركة يتم بتقسيم متطلباتها إلى ثلاث أجزاء كما في المخطط التالي: 





وأيضا يجب أن نذكر أن لكل حركة متحكم وهو کائن من نوع n٣ 0۲٥11۲‏ 10ص1 والذي یقوم 
بالتحكم بالحركة من (بدء - توقف - إعادة) 

سنستعرض الآن هرمية بناء الحركات في 1'1101]161 وسننتقل لأمثلة ننفذ فيها عدة حركات. 

في البداية نصرح عن الكائنات الخاصة بالحركة كما يلي: 
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الان سنقوم بتجهيز حركتنا في تابع خاص سنسميه 1111]/41111112]1011 وسيتم ضبط فيه كل اعدادات 
الحركة المطلوبة: 


0104 initAnimation () { 
animationController=AnimationController (duration: Duration (seconds: 
1),vsync: this); 
flipAnimation=Tween (begin: 0.0,end: 


1.0) .animate (CurvedAnimation (parent: animationController, curve: 
Curves. fastOutSlowIn) ) ; 
animationController. forward () ; 


} 





وسنقوم باستدعاء هذا التابع ضمن التابع الافتراضي 101518]6: 


void initState () { 
super.initState () ; 
initAnimation () ; 


} 





السطر الثاني وهو مهم جدا والذي يعرف مكان بدء وانتهاء الحركة وكذلك طريقة دخولها للشاشة: 


flipAnimation=Tween (begin: 0.0,end: 
1.0) .animate (CurvedAnimation (parent: animationController, curve: 
Curves. fastOutSlowIn) ) ; 





بدأنا في النقطة ..,. إلى النقطة إلى ١١‏ ودخول نوع 125601115101512 ويمكنك الاطلاع على الأنواع 


الأخرى بالاعتماد على الجدول. 





¬ Curves.decelerate 2 
Curves.easelnSine Curves. bounceln 





Curves.ease 
Curves.easelnQuad Curves.bouncelnOut 




















Curves.easeln e 
Curves.easelnCubic Curves, bounceOut 
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التعليمة الأخيرة هي: 


6 171101011-01110111.10172100(: 


والتي تقوم ببدء الحركة (أي تنفيذها). 
ويجب أن نعلم أن أي عنصر سيقوم بالحركة سيتم وضعه ضمن 810111061 4110121105 الأمثلة 
التالية ستوضح الحركة بشكل أكثر وضوحا. 


مثال تطبيقي: 
ليكن لدينا الواجهة التالية ونريد عند فتح التطبيق دخول الصفحة بالشكل التالي: 


١ 5 
Login 


Username 


Password 














أي أن تنزل من الأعلى إلى الأسفل 
هنا سنبني الصنف م1'11 و م1'11_ والذين سيقومان بتحقيق الواجهة المطلوبة. 
الكود التالي لكود كامل الواجهة: 


import 'package: flutter/material.dart'; 
import 'package: flutter/animation.dart'; 
class Flip extends StatefulWidget 
١ 

doverride 

State<StatefulWidget> createState() { 


// TODO: implement createState 
return new Flip(); 


1 
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class Flip extends State<Flip> with SingleTickerProviderStateMixin { 
Animation flipAnimation; 
AnimationController animationController; 
Goverride 
vOid initState () { 
super.initState (); 
initAnimation (); 
} 
vOlid initAnimation () { 
animationController=AnimationController (duration: 
LJ gVUSVOC: EBI); 
flipAnimation=Tween (begin: 0.0,end: 
1.0) .animate (CurvedAnimation (parent: animationController, curve: 
Curves. fastOutSlowln) ); 
animationController. forward (); 


Duration (seconds: 


} 

Goverride 

Widget build(BuildContext context) { 
// TODO: implement build 


return AnimatedBui lder ( 
animation: animationController, 
builder: (BuildContext context,Widget chile) { 
return UiWithoutAnimation (); 
J, 
J); 


Widget UiWithoutAnimation () 
ا‎ 
final double pi=3.14; 
final double width=MediaQuery.of (context) .size.width; 
return new Scaffold ( 
body: Transform ( 
Lransfornm: 


Matrix4.identity() ..rotatex (2*pi*flipAnimation.value), 
child: new Center ( 


child: new Card ( 
child: new Column ( 
children: <Widget> | 

new Padding (padding: Edgelnsets.only (bottom: 100)), 

new Text ("LogIn",style: TextStyle (fontSize: 50),), 

new Padding (padding: Edgelnsets.only (bottom: 75)), 

new Text ("Username",style: TextStyle (fontSize: 
Z2U,COlOF?: COLOFS. GFECED) FU, 

new TextField(style: TextStyle (color: Colors.black)), 

new Padding (padding: Edgelnsets.only (bottom: 5)), 

new Text ("Password",style: TextStyle (fontSize: 
2UFCOLOF: COLOES. GTeECN) rl; 


new TextField(style: TextStyle (color: Colors.black)), 


تأليف فيصل الأسود | مهندس برمجيات 
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نلاحظ أننا بنينا الواجهة في تابع منفصل ھو W 1۲101٤۸111234101‏ €1 كما يجب أن نذكر أن 
الحركة تمت عن طريق وضع التحويل التالي 





بتغير المحاور للدوران مثل ۲٥٤۵٥ Z‏ ,۷ 101216 سنحصل على حركات جديدة. 


وتم استدعاء الواجهة بالكود الرئيسي 10211: 


import 'package: flutter/material.dart'; 
import 'package:my_project/EnterSlideAnimation.dart'; 


import 'package:my_project/FlipAnimation.dart' ; 
import 'HideShowAnimation.dart'; 
vOid main () => runApp (MaterialApp (home: Flip(),)); 





سنستعرض الآن أمثلة وعلى عجالة مع العلم أن كل واجهة يمكن استدعاءها بالصنف 1311 كما شاهدنا 
لذلك لن نكرر كود التابع 7121 كل مرة. 


مثال تطبيقي: 


اكتب الكود اللازم لبناء الواجهة التالية: 
Login‏ 


Username 


Password 
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مع إمكانية تحريكها دخولا للشاشة كما يلي: 
Lo Login‏ 


User 
Username 


Password 
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مثال تطبيقي: 
اكتب الكود اللازم لبناء الواجهة التالية بحيث عندما نضغط ضغطة واحدة على الصورة سوف تنزل 


كما في الشكل. 























وعندما نضغط ضغطتين عليها مرة أخرى ستعود كما كانت. 
وهنا سنستخدم الأحداث ونتحكم بالحركة عن طريق 2021101121) 41111214101 
يجب الذكر أن عملية إضافة الصور في 1'111]]61 تتم بالشكل التالي: 
النقر بالزر الأيمن على مجلد المشروع واختlqر .Show 1n explorer‏ 
۰ الدخول لمجلد المشروع وإنشاء مجلد اسمه 255615 ومن ثم ننشی مجلد اخر اسمہ 1٣28٤5‏ 
بداخله ونضع الصور فيه. 
٠‏ نذهب إلى الملف ١١21121‏ .11165062 في ملفات المشروع. 
٠‏ نضيف الصورة المطلوبة في الملف تحت كلمة :11111161 كما في الشكل مع مراعاة 
المسافات هنا: 


ASSES: 








- aaget3a/ images/ apple. jp 





والآن نقوم بإنشاء كود الواجهة المطلوبة ويكون بالشكل التالي: 
import 'package: flutter/material.dart' ;‏ 
import 'package: flutter/animation.dart' ;‏ 
class HideShow extends StatefulWidget‏ 
{ 


Qdoverride 


State<StatefulWidget> createState() 1 
// TODO: implement createState 
return new _HideShow() ; 


} 
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} 
class _HideShow extends State<HideShow> with 
SingleTickerProviderStateMixin { 
Animation hideShowAnimation; 
AnimationController animationController; 
dGoverride 
vOid initState () { 
super.initState () ; 
animationController=AnimationController (duration: Duration (seconds: 
1),vsync: this); 
hideShowAnimation=Tween (begin: 0.0,end: - 
0.15) .animate (CurvedAnimation (parent: animationController, curve: 
Curves. fastOutSlowIn) ) ; 
animationController. forward () ; 


} 


doverride 
Widget build (BuildContext context) { 
// TODO: implement build 


return AnimatedBui lder ( 
animation: animationController, 
builder: (BuildContext context,Widget chile) { 
return UiWithoutAnimation () ; 
}, 
(7; 
} 


Widget UiWithoutAnimation () 
{ 
final double width=MediaQuery.of (context) .size.width; 
return new Scaffold ( 
body: new Center ( 
child: new Stack ( 
children: <Widget>[ 
new Center ( 
child: Container ( 
padding: Edgelnsets.all (10.0), 
width: 350.0, 
height: 200, 
decoration: BoxDecoration ( 
borderRadius: BorderRadius.circular (15. 0) 
), 
child: new Row ( 
crossAxisAlignment: CrossAxisAlignment.end, 
mainAxisAlignment: MainAxisAlignment. center, 
children: <Widget>[ 
new RaisedButton ( 
child: Text ("Hello"), 
elevation: 7.0, 
color: Colors. lightBlue, 
textColor: Colors. white, 
onPressed: )(1( , 
), 
new RaisedButton ( 
child: Text ("World"), 
elevation: 7.0, 
color: Colors. lightBlue, 
textColor: Colors. white, 
onPressed: )(1( , 
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), 
new Center ( 
child: GestureDetector ( 
child: Container ( 
alignment: Alignment. bottomCenter, 
width: 350,height: 200, 
decoration: BoxDecoration ( 
borderRadius: BorderRadius.circular (15.0), 
image: DecorationImage (image: 
AssetImage ('assets/images/apple.jpg') , fit: BoxFit. cover) 


), 


transform: Matrix4.translationValues (0.0, 
hideShowAnimation.value*width, 0.0), 


), 
onTap: () {animationController. forward() ;}, 
onDoubleTap: () {animationController. reverse () ;} 


7 
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رسائل التنبيه السريعة 102351" 


تعد الرساكل السريعة 10356 من ابسط الرساكل التي تقدمها التطبيقات للمستخدم وتكون غالبا على 


شكا تنبيه يظهر على الشاشة مدة زمنية ويذ يختفي. 
فلاتر تقدم لنا في احدى مكتباتها طرق التعامل مع هذا النوع من الرسائل. 
لكي نستطيع التعامل مع رسائل الا102351 علينا أولا استدعاء المكتبة الخارجية 


ل 6385 1ك 1 
الى الملف 3'23101. 1005566 ومن ثم أء5 52012865 بالإضافة الى استدعاء المكتبة الى صنف العمل 


الذي يريد استخدامه كما يلى: 


import 'package: fluttertoast/fluttertoast.dart' ; 


يعد استخدام هذا النوع من الرسائل من ابسط الأشياء حيث يكفي فقط استدعاء الطريقة 


5110151035 لإظهار الرسالة كما يمكن ضبط اعدادات خاصة لتلك الرسائكل: 


Fluttertoast.showToast ( 

MSG: "This 15 Center Short Toast", 
LOASLLENGTER: TOAST. LENGTH SHORT, 
GraVILLYyY: TOASTGESVILCY. CENTER, 


5226 185662621268+ lL, 

253: ع1 065 ترا مع ونع‎ : COLOES FEQ, 
textColor: Colors.white, 
10505531286 LGU 


الجدول التالي يظهر اهم الخصائص المستخدمة لإظهار رسائل التنبيه السريعة 


description 
String (Not Null)J(required) 
Toast.LENGTH_SHORT or Toast.LENG TH_LONG (optional) 


ToastGravity. TOP (or) ToastGravity.CENTER (or) 
ToastGravity.BOT 1 OM 


Colors.red 
Colors.white 


16.0 (float) 
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toastLength 


gravity 


timelnSecForlos int (only for ios) 


bgcolor 
textcolor 


fontSize 


= 
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ولإلغاء كافة الرسائل الظاهرة يكون بالتعليمة: 


Fluttertoast.cancel () 


سنستعرض الان بعض رسائل تنبيه سريعة مع خصائص مختلفة: 


x x %‏ 3 
م > 8 11:08 لي م © 11:08 
3 
6 


و 


Flutter Toast Flutter Toast 




























Show Long Toast Show Long Toast 


Show Short Toast Show Short Toast 
Show Center Short Toast Show Center Short Toast 
Show Top Short Toast 
This is Center Short Toast 
Show Colored Toast Show Colored Toast 


This is Colored Toast 











gravıty:ToastGravity. CENTER bgColor:Colors.red 


ا لي م 11:08 
2 
© 


Flutter Toast Flutter Toast 


This is Top Short Toast 


Show Long Toast Show Long Toast 


Show Short Toast Show Short Toast 
Show Center Short Toast Show Center Short Toast 
Show Top Short Toast Show Top Short Toast 


Show Colored Toast Show Colored Toast 


This is Long Toast 








gravıty:ToastGravıity. TOP gravity: ToastGravity.BOTTOM 
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Firebase ٽlنlبلll قواعد‎ 





Firebase 


فاير بيز ©1"1160235: هي خدمة قدمتها ©00081) منذ فترة وقد كانت تقتصر فقط على تخزين 
البيانات وبعض الأشياء البسيطة, ولكن في 16 1/0 000816 تم الإعلان عن الكثير من المميزات 


الجديدة والرائعة وأصبحت حديث الكثير من المطورين 


مميزاتها: 

٠‏ التحقق 4116161026105 : وهي عملية تسجيل الدخول سواء عن طريق حساب 00[12اء1'00 
1113211 ,1771161 ,ع1ع600, وفي نفس الوقت حماية البيانات الموجودة في 102120256 
(بمعنى أنه يمكنك منع أي شخص من استخدام التطبيق دون عملية تسجيل الدخول وهو 
الوضع الافتراضي) 

»ء قواعد بيانات متزامنة 0314035٥‏ 1106]-15621 : وهي تفيد في تخزين البيانات على السيرفر 
وأكثر شيء يميزها هي أنها ©12(ا-11621 بمعنى أنه أي تغيير يحصل على الداتا بيز سيتغير 
فوراً في التطبيق كما سنرى في هذا الشرح. 

٠‏ التخزين ع5]0125: تخزين الملفات والصور. 

©» الاستضافة 1105]1285: لاستضافة موقعك علىع1'116025 . 


۰ الإشعارات 1101611162610525:إرسال إشعارات. 


والعديد من المميزات يمكنك تفقدها عند الدخول الى حسابك في 11560356 من الجدير بالذكر أن 
هذه الخدمات مجانية (ولكن بببعض الحدود. يمكنك رؤية ماهي الحدود عبر هذا الرابط 
https://1rebase.google.com‏ 
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سنبداً في هذا الدرس شرح عن 1026130256 11160356 وسنحاول قبلا بإذن الله شرح باقي الأمور 
بداية يجب أن يكون لديك حساب 6000816 أي حساب 610211. 


نذهب الى موقع ع35اع1"11 نضغط 5)۲۲ aû Get‏ نختار Add project‏ 














Welcome to Firebase! 


Tools from Google for developing great apps, engaging with 
your users, and earning more through mobile ads. 


Q Learn more #F Documentation O Support 


Recent projects 


MyFireBase 


| myfirebase-39fc0 


Add project 


© Explore a demo project 


Terms <‘ Privacy Policy 





ثم نضع اسم المشروع الذي نريد ونضع الدولة والموافقة على الشروط ثم انشاء 


Add a project 


Project name 
/ = + و05‎ + »[« 


Tip: Projects span apps 
across platforms @ 


Project ID @ 


my-awesome-project-id 


Locations @ 


United States (Analytics) 
nam5 (us-central) (Cloud Firestore) 


E Use the default settings for sharing Google Analytics for Firebase data 


Share your Analytics data with all Firebase features 

Share your Analytics data with Google to improve Google Products and Services 
Share your Analytics data with Google to enable technical support 

Share your Analytics data with Google to enable Benchmarking 

Share your Analytics data with Google Account Specialists 


[ÛJ I accept the controller-controller terms. This is required when sharing 
Analytics data to improve Google Products and Services. Learn more 
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بعد ذلك سيتم إنشاء المشروع . نضغط على ضصضAp Add Firebase to Your Andro1d‏ 


Firebase 


Feisa]l Spark pian 


Get started by adding 
Firebase to your app 


Our core SDK unlocks most Firebase features and includes 
Analytics for iOS and Android apps 


Add an app to get starte 


Analytics 


Upgrade 


Store and sync app data in milliseconds 





O Project > = 2 
¥ J firebase _tutorial Cı llsers\Feisal AswadtAndroidStu 
عر‎ Be lib 


¥ a androıd [firebase _tutorlal_android] 
ع‎ IW .qradle 
YT 8لا‎ app 
¥ e src 
T I main 
عر‎ |١131 java 
عر‎ bı kotlın 
عع 3لا عر‎ 
AndroıdManıfest.xml 
#F build.gradle 
fF; google-services,json 
عاقدرو 1 ع‎ 
@¥ build.qradle 


a firebase_tutorlal_androıd.ırml 





fF; qoogle-services,json 








# | gradle.properties 
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نقوم بإنشاء تطبيق اندرويد جديد ثم نتوجہ الى 1" ×.)sع؟ Andro dM ani‏ لالتقاط اسم الحزمة ونضعها 
كما يظهر في الصورة ثم نضغط مطض‌A :Register‏ 












x Add Firebase to your Android app 


9 Register app 


Android package name @ 


App nickname (optiona) @ 


Debug signing certificate SHA-1 (optional) @ 


Required for Dynamic Links, Invites, and Google Sign-In or phone number support in 
Auth. Edit SHA-1s in Settings 





بعد ذلك نضغط على 500516-5617:1065.1501 10017711020 وهو ملف إعدادات الذي يربط مشروعنا 
على ع1'1116025 بمشروعنا في51611010 4101010 


x Add Firebase to your Android app 


© Register app 


Android package name: com.myapp 


@ Download config file Instructions for Android Studio below | C++ 


¥ Download google-services.json 
Switch to the Project view in Android او‎ : 


F3 MyApplication (-/Desktop/M 
Studio to see your project root directory. » D.gradle 
» O.idea 





Packages | FE Scratche 











v Papp 
ع‎ » Obuild 
1 2 3 5 Dlibs 
Move the google-services.json file you just چ‎ > Pis 
downloaded into your Android app module root 9 El .gitignore 
directory. Ld app.iml 
® build.gradle 
ع‎ 
5 
تفص‎ ÎM proguard-rules .pro 
ھا‎ » Dgradle 
Previous 
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سيتم تحميل هذا الملف قم بنسخه ثم نتوجه الى 51611010 801010 ونضغط بالزر الأيمن على 
مجلد }طضa‏ igخۃlرExplorer Show 1n‏ 











xX firebase_tutorial [C:\Users\Feisal Aswad\AndroidStudioProjects\firebase_tutorial] - ..\android\app\src\main\AndroidManifest.xml [firebase_tutorial_android] - Android Studio (Administrator) ب‎ xX 
File Edit View Navigate Code Analyze Refactor Build Run JTools VCS Window Help 
& firebase_tutorial ) Pl android ) Bl app ) | O <nodevices> v | | | % main.dat v | * š © @ ل | 12 جا‎ ©. 2 
2 عع‎ 
u | Wl Project v New ۾‎ ‘Animation.dart * fS FlipAnimation.dart ٠“ | f HideShowAnimation.dart X | ها‎ Android Manifest.xml * 2 
u 
fF |Y FE firebase_tutorial C\Users\F 3> شنح‎ Ctrl+X Open for Editing in Android Studio 2 
م 7 ت‎ 8 
@ > Ba lib 1 18 Copy Ctrl+C ındroid="http: //schemas .android.com/ apk /res/ android" 2 
ا ؟”‎ [frehase_ tutor MOC path Ctrl+ShiftrC |sbt.firebasetutorial"> 5 
ع0301. ح‎ 6 : 3 
9 Copy Relative Path Ctrl+Alt+ShifttC | CC 50 5 
2 Wl app LRNET permısslon 1s required for development. Specılf1cally, 
¥ Bl crc û Paste Ctrl+V needs it to communicate vith the running application 
Bl main Find Usages Alt+F7 F setting breakpoints, to provide hot reload, etc. ٤ 
< Bl java Find in Path... Ctrl+Shift+F 5 
J . . 101 3712010340 : "حعتتتة22‎ 31100340 .226 0355101 . 111115101151" / < 9 
5 * Bî kotlin Replace in Path... Ctrl+Shift+R o 
2 5 
28 211 دع‎ Analyze % çer.app.FlutterApplication is an android.app.Application that 3 
ن‎ Rğ AndroidMa EE ۾‎ |utterMain.startInitialization (this); in its onCreate method. 
5 0 5 ًَ د 1 خخ دوت تك عه‎ 1 
9 AP build.gradle 7 1 cases you can leave ıs a9 1s, but you 1f you vant to provıde 
ف‎ am 1 | Flutter tal functionality lt 1s fine to subclass or reimplement 
ci اكوك عومدو وه‎ Add to Favorites 5 2552خ 263 1صرصا‎ and put your custom class here. --> 
« Bl gradle 
5 .انط 9ج‎ Show Image Thumbnails Ctrl+Shift+T 1 0 
8 Pî firebase_tutorial_andrı Reformat Code Ctrl+Alt+L _abel="firebase tutorial" 
U الظد‎ 
ص‎ f) google-services,json Optimize Imports Ctrl+Alt+O con="€mipmap/ic_launcher"> 
انم‎ 71 8 7 
#ı gradle.properties Delete... Delete 
3 ك‎ PSE - „id :name=" .MainActivity" 
Êl gradlew fl Run cmd script »id:launchMode="singleTop" 
0 ER1 gradlew.bat Fı Run cmd shell „id: theme="êstyle/ LaunchTheme" 
> îı local.properties : »id:configChanges="orientation | keyboardHidden | keyboard | screenSize | locale | layoutDirection | fontScale | screenLajy out | de: 
2 o settings.gradle تا‎ rıid:hardwareAccelerated=" true" 
5 ا‎ aies Open in Terminal »id:windowSof tInputMode="adjustResize"> 
م‎ PH ios Local History 5 عمط‎ keeps the yiındov EEE of the actıvıty 7126 1 0 
a ® Synchronize 'app' untıl Flutter renders 1ts fı1rst frame. It can be removed 1f 8 
2 . flutter-plugins ای ا ست الي‎ there 1s no splash screen (such as the default splash screen 2 
ت‎ #l .gitignore © Edit Scopes... defined in €style/LaunchTheme). --> 2 
o 4 
ھ‎ Êl .metadata Directory Path Ctrl+Alt+F12 data 3 
تة‎ .packages ındroid:name="i0. flutter.app. android. SplashScreenUntilFirstFrame" 3 95 
Yk ا‎ 4% Compare With... Ctrl+D ج‎ 
Pî firebase_tutorial.iml 
Load/Unload Modules... 
@ Dart Analysis := TODO 7 Flutter Performance 0 Event Log 
الح سح ل 227 و‎ Remove BOM 
Û Highlights the file in platform's file 78 CRLF $ UTF-8 Context: <no context> dm 2 
¢) Create Gist... 
Convert Java File to Kotlin File Ctrl+Alt+Shift+K 


سيتم فتح مجلد المشروع في حاسوبك نقوم بلصق هذا الملف الذي حملناه في مجلدم مك 


الآن يجب علينا إضافة مكتبات 11165256 الى مشروعنا في 5111010 4101010 





ثم نضغط اعع packages‏ 


وفي ملف الصنف الذي سنبني به واجه التخاطب مع 11165256 نضيف المكتبات كما يلي: 











dependencies: 
flutter 2 


TIUTEEE 
Lirebase database: ^2.0.1 


ak 2 
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Cloud Firestore 


The next generation of the Realtime 


Database with more powerful queries and 
automatic scaling 


Create database 


Learn more 


Find out if Cloud Firestore 5 
وواءنال110! جالق ا‎ 01010 ICEL 


Firebase 


f Project Overview 


Develop 


2% Art ntiratian 
مم‎ Authentication 


a EEC 
© و5110‎ 
(3 Functions 
ألكا الا الإ/‎ 


Quality 


Analytics 
„ıl Dashboard 


Spark 


Upgrade 





هنا عليك الاختيار بين قاعدة بيانات تدريبية وهي الخيار الثاني او قاعدة بيانات لمشروع حقيقي 


ويفضل في حال كانت تجربتك الأولى مع فايربيز ان تبدأ بقاعدة بيانات تدريبية مع العلم انها غير 


Security rules for Cloud Firestore 


Once you have defined your data structure you will have to write rules to secure your data. 
Learn more Z 


© Start in locked mode 
Make your database private Dy 
denying all reads and writes 


service cloud. firestore { 
match /databases/{database}/documents { 
match /{document=#**#} { 
6 Start in test mode allow read, write: if false; 
Get set up quickly by allowing all 
reads and writes to your database 


@ All third party reads and writes will be denied 


Enabling Cloud Firestore will preclude you from using Cloud Datastore with this project, ا‎ 0 
notably from the associated App Engine app 
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كما يمكننا ان نرى البيانات التي نملكها في قاعدة بياناتنا من التبويب 1021363256 في واجهة 
السيرفر 111025 


Firebase Ee Go to docs A 6 


f Project Overview e Database 2 Cloud Firestore BETA w 0 


Develop Data Rules @ Indexes Usage 


» Authentication 


Storage 

Hosting 2 feisal-845bd 

Functions 
ل‎ Add collection 

ML Kît 


Quality 


Analytics 


„ı| Dashboard 


e ا‎ Upgrade 





/ 


الان يجب آن ندا برهجيا بعمليات الاقصال با قارب الخاصة بنا 
ما سنقوم به بالبداية هو تعريف كائن مهمته الاتصال مع قاعدة البيانات الخاصة بنا وذلك كما 


e 


final 
studentReference=FirebaseDatabase.instance. reference () .child ("student") ; 





هذا التابع اتصل مع قاعدة البيانات الخاصة بنا وانشئ حقل هو 010611 يمثل جدول الطلاب. 


الخطوة التالية هي ان ننشئ احداث وتوابع تستجيب لها لكي يكون الاتصال مع القاعدة متزامنا 
بحيث أي تغير يحصل في القاعدة سوف ينعكس اثره على تطبيقنا مباشرة. 


StreamSubscription<Event> _onStudentAddedSubscription; 
StreamSubscription<Event> _onStudentChangedSubscription; 


_onStudentAddedSubscription= 
5 3ه انضرع قب 1 060 مضق 11 طاعصم,قع زرة عدم 1 6151516 10انا‎ 5170615 650060( j; 


_onStudentChangedSubscription= 
5 0110 10خ قنية:  ) رمخ 108ل . امه ؤضسة 15 511-06 مذرة, معة مرة 1812 تحر‎ 61 2150858607 





في الكود السابق قمنا بإنشاء مراقبين لحدثين لمراقبة الإضافة والتعديل وعند حدوث أي تغيير بهما 


سوف يستدعى التابعين الخاصين بالإضافة والتعديل كما يلي على الترتيب: 
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void _onStudentAdded (Event event) { 
setState(() { 
1tmes.add (new Student. fromSnapShot (event.snapshot) ) ; 
})7 
} 


void _onStudentChanged (Event event) { 

var 
oldStudentValue=itmes.singleWhere ( (student) =>student. id==event. snapshot 
. key) ; 

setState(() { 

1tems [items.indexOf (oldStudentValue) ]=new 

Student. fromSnapShot (event.snapshot) ; 

0) 

} 





اما بخصوص تابع الحذف فيكون بالشكل التالي: 
void _deleteStudent (BuildContext context, Student student, int‏ 

position) async { 

await studentReference.child (student. id) .remove () . than ( (_) { 

setState(() { 
1items.removeAt (position) ; 

})7 

})7; 
} 





ويكون تابع الواجهة الكلي لاظهار والتعامل مع البيانات كما يلي: 


import ' غ432‎ : 352 ' 
import 'package: flutter/material.dart'; 
import 'package:firebase_demo/model/Student.dart' ; 
import 'package:firebase_demo/ui/Student_Screen.dart'; 
class ListViewStudent extends StatefulWidget { 
0 ع0 221ع0177‎ 
State<StatefulWidget> createState() 1 
// TODO: implement createState 
return new _ 115117161511042 )( م‎ 


} 
} 


f£inal 
studentReference=FirebaseDatabase.instance.reference().child("student" ) 


class _lListViewStudent extends State<ListViewStudent> { 


List<Student> itmes; 
StreamSubscription<Event> _onStudentAddedSubscription; 
StreamSubscription<Event> _onStudentChangedSubscription; 
doverride 
1initState () { 

super.initState (); 

1tems=new List(); 


_onStudentAddedSubscription=studentReference.onchildAdded. listen (_onStu 
denrtAdded) j 
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_onStudentChangedSubscription=studentReference.onchildChanged. listen (_oO 
nStudentUpdated) ; 


} 

dGoverride 

void dispose () { 

super.dispose (); 
_onStudentAddedSubscription.cancel () ; 
_onStudentChangedSubscription.cancel (); 


dove FELdêe 


Widget build(BuildContext context) { 
// TODO: implement build 
return new Scaffold ( 
appBar: new AppBar (title: new Text ("Firebase'"), 
centerTitle: true, 
backgroundColor : 
) 
body: Center ( 


child: ListView.builder (itemCount: itmes. length, 
55063535: Edgelnsets.onLYy (LOP: 12 (9غ:‎ 
1temBuilder: (context,position) { 
return new Column ( 
children: <Widget> | 
DIVIQEE (hEIGRNE: BS; 


ListTile (title: new Text ("{Ş$itmes [position] .name}", 


Style: TextStYyle{Color:s Colors. Fed, fOntSIZé: 25,0; 
), 


Colors.greenAccent 


subtitle:new Text ("{Ş$itmes [position] .name}", 


style: TextStyle (color: Colors.red, fontSize: 11.0), 
J), 


leading: Column ( 
children: <Widget> | 
CircleAvatar (backgroundColor : 
radius: 16.0, 
child: new Text ("{Ş$itmes [position] .name}") , ) 


IconButton (icon: Icon (Icons.delete) ,color: 
Colors. lIightBlueAccent,onPressed: 


Colors. redAccent, 


بي رس 63613 :6ه ى ترق ذا ام فم ]فرق 1 يخ 6 21516015 6 من =e HEISE‏ 


[CONBUTEEON (1C0: 
Colors. lIightBIlueAccent,onPressed: 


EUGENTCRaRNGES Û0)‏ قورة: ‏ <ك ر() 


Icon (Icons. delete) ,color: 


1, 
J), 


onTap: 
(J => . 3 103667165 عانقرة 0ن ةا‎ (CORN م22 0531م :[ 16 81مق6م ] كه 5 61 عدة ا‎ 


floatingActionButton: FloatingActionButton (onPressed: 
(J) 1_ CFE LENEWS LUCE EDE Er 


child: new Icon(IlIcons.add),), 
JF 
1 
Void 258 61760 إتاتقة كت تا قاع187) 06ت راقع‎ 
setState(() 1 


1tmes.add (new Student. fromSnapShot (event.snapshot)); 
J); 


} 


661 8765 قت 661 م6 ننانا 01248 _ 65386 
var‏ 
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oldStudentValue=1itmes.singleWhere ( (student) =>student.id==event.snapshot 
.key); 
setState(() { 
1tems [items.indexOf (oldStudentValue) | =new 
Student. fromSnapShot (event.snapshot) ; 
J); 


] 
SEUOENT INE‏ :10625 ترجاه 5 1ت 56365 قات 06 انظ )جارة 610 0618:5868 5386 


position) async { 
await studentReference.child(student.d1id) .remove ().than(( ) { 
setState(() { 

1tems. removeAt (position); 


V¥O10 _ NavVIGaLelOoOSLUdEeNTE{(BULLOCORNTEST Con TExXTL, 5 26 عع 66 5 عض‎ 
position) { 
317316 Navigator.push (context, MaterialPageRoute (builder: (context) 
=>StudentScreen (student) ) 
J); 
1 
634 _:6 7262 6611838 6 10 اعد 5 811116635 ) عتقعة‎ 661566 6( 1 
await Navigator.push (context, MaterialPageRoute (builder: (context) 
=>StudentScreen (new Student (null, "", "", "",( mm, ""((( 





التابع ew5) e1†‏ Nعatعاcء_‏ مهمته هي الانتقال للشاشة التالية والتي تقوم بعرض مكان حقول 


ادخال مستخدم جديد او العديل عليه. 


VOI _' رجا مت فمات 11613 6خ م عن‎ ) 81111 0665 6 65 2561 
await Navigator.push (context, MaterialPageRoute (builder: (context) 
=>StudentScreen (new Student (null, "", "",( mn, MM, MY) )) 


8 





اما الشاشة التالية فهي بتصميم بسيط لإظهار حقول الادخال ويكون كما يلي: 


import 'dart:async'; 
import 'package:flutter/material.dart'; 
import 'package:firebase_demo/model/Student.dart' ; 


class StudentScreen extends StatefulWidget { 
final Student student; 
StudentScreen (this.student) ; 
Goverride 
State<StatefulWidget> createState() 1 
// TODO: implement createState 


return new StudentScreen (student) ; 


ا 
} 


final 

studentReference=FirebaseDatabase.instance.reference().child("student" ) 

class StudentScreen extends State<StudentScreen> { 
TextEditingController _nameController; 
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TextEditingControlLler _ageController; 
TextEditingController _departmentController; 
TextEditingController _descriptionController; 
TextEditingController _cityController; 
final Student student; 
_StudentScreen (this. student) ; 
dGoverride 
void initState () { 
_nameController=new TextEditingController (text: 
widget.student. name) ; 
_ageController=new TextEditingController (text: widget.student. age) ; 
_ departmentController=new TextEditingController (text: 
widget.student. department) ; 
_ descriptionController=new TextEditingController (text: 
widget.student. description) ; 
_CItyController=new TexltEQItingController (text: 
widget.student.city) ; 


} 


Goverride 
Widget build (BuildContext context) { 
// TODO: implement build 
return new Scaffold ( 
appBar: AppBar (title: Text ("Student"), 
), 
body: new Container ( 
margin: Edgelnsets.only (top: 12.0), 
alignment: Alignment. center, 
child: new Column ( 
children: <Widget> | 
TextField ( 
controller: _nameController, 
decoration: InputDecoration (icon: 
Icon (lIcons.person) , labelText: "name"), 
) 
Padding (padding: Edgelnsets.only (top: 7.0)), 
1 ع‎ 
controller: _cityController, 
decOFatIon: INBUEDECOFATLON{LCOR: 
ICON(ICONS.LOCACI10N CIEy),labelLText: "name”), 
J), 
Padding (padding: EdgelIlnsets.only (top: 7.0)), 
TextField ( 
controller: _departmentController, 
decoration: InputDecoratlion (Lcon: 
TCOR (ICONS. dEPAFTUTFé SOFA, LABEL TEXE: "nane"), 
) 
Padding (paddling: EdgeInséets.onlYy (top: 720(( 
"8325721610 ) 
controller: _descriptionController, 
decoration: InputDecoration (icon: 
Icon (lIcons.description) ,labelText: "name"), 
J), 
PaddInG{(paddaing: EQGEeEINSETE.ONLY(LOBS FEUD 
TextField ( 
controller: _ageController, 
decoration: InputDecoration (icon: 
leon (LlEONnS. data USagê) , labelText: "name"), 
) 
Padding (padding: EdgelIlnsets.only (top: 7.0)), 
FlatButton ( 
onPressed: () { 
112 (widget.student.id! =0) { 
studentReference.child (widget. student. id) .set ( { 
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'name':_nameController, 
'age':_ageController, 
'city':_cityController, 
'department' :_ departmentController, 
'description':_descriptionController, 
Js EHO GF 
Navigator.pop (context) ; 
J)? 
} 
else 
{ 
112 (widget.student.id! =0) { 
studentReference.push. set ( { 
'name':_nameController, 
'age':_ageController, 
'city':_cityController, 
'department' :_ departmentController, 
'description':_descriptionController, 
}J).than((_){ 
Navigator.pop (context) ; 
J)? 
1 
J, 
child: 
(widget.student.id!=null) ?Text ("Update") :Text ("Add") 





Student information 


@ Muhammed 


nothing 


3 
@ Ahmed 
0 


nothing 
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ظ 3000 4 





امنا 





Ahmed 
33 


Kirkuk 


Java Developer 


nothing 


5 
الت 


با 
كر 





كذلك يوجد الكثير من الأشياء التي يمكن ان نقوم بها باستخدام قواعد البيانات فايربيز مثل 
الدخول باستخدام الايميل او حساب الفيس بوك او حتى التعامل مع الصور ضمن قواعد البيانات 
والصوتيات ولكن سنكتفي في كتابنا الى هذا الحد ولعل باقي الشروحات ستكون على القناة على 


اليوتيوب. 
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النشر والربح من التطبيقات 


Publish Applications 


WE CAN ONLY SEE A SHORT DISTANCE AHEAD ,BUI WE CAN 
SEE PLENTY THERE THAI NEEDS 1O BE DONE 


Zan Turing 








137 


إضافة إعلانات 012201/ 


إعلانات ادموب التي تقدمها جوجل تتيح لك عرض إعلانات على تطبيقك والحصول على مبالغ 
مقابل تلك العروض. 

بالبداية يجب ان تملك حساب 1105 40 لكي تستطيع بناء وحدتك الاعلانية ومن ثم الحصول على 
كود تلك الوحدة لكي تعرضها على تطبيقك. 


المكتبة الأساسية التي سنستخدمها في هذا القسم هي مكتبة 1165256_2010206 والتي يجب 
اضافتها كما فعلنا مع المكتبات او الحزم السابقة . كذلك يجب استدعاء المكتبات الأساسية 


.firebasedl 


لنبداً بشرح إضافة أنواع الإعلانات المختلفة لتطبيق فلاتر » بالبداية علينا تحديد معلومات التطبيق 
من نوع الجهاز الهدف »الكلمات المفتاحية المتعلقة بفكرة التطبيق» تاريخ الانشاء » وإمكانية 
الاستخدام من قبل الأطفال والعديد.... 


نعرف كائكن معلومات تطبيق كما يلي: 


static final MobileAdTargetingInfo targelnfo 
=new MobileAdTargetingInfo ( 
textDevices:<String>[], 


keywords:<String> [ 'music', 'video', 'picture'], 
birthday :new DateTime. now () ; 
childDirected: true, 


)7 





الان سننشئ وحدتين اعلانيتين مختلفتين › الأولى من نوع 83113۲4٩‏ والتي تظهر كما في الشكل 
التالى: 


e 


1 
me 
AdMob has a YouTı Test Ad:ş 
Tap for tutorials, screencasts, & more 
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BannerAd createBannarAd () { 
return new BannarAd ) 
adUnitId: BannerAd. testAdUnitId, 
size:AdSize.bannar, 
targetingInfo: targelInfo, 


listener: (MobileAdEvent event) 


{ 


print ("Bannar event :Şevent") ; 





كما يمكن تغيير موضعها عن طريق الخاصة 021261101 


الثانية من نوع 17161511012140 والتي تملا الشاشة كما في الشكل التالي: 


You're displaying an 
Interstitial test ad 
from AdMob. 


31 AdMob by Google 





يمكن تعريفها بالشكل: 


InterstitialAd createlInterstitialAd () { 
return new InterstitialAd ( 
adUnitId: InterstitialAd. testAdUnitId, 


targetingInfo: targelInfo, 


listener: (MobileAdEvent event) 


{ 


print ("Interstitial event :Ş$event") ; 





الوحدة الاعلانية الأولى يمكن استدعائها عن طريق الطريقة الموروثة 11٤8400‏ بحيث نكتب 
ضمنها: 


_bannerAd=createBannarAd () ..show () ; 
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ونغلقها في الطريقة 0150056 كما يلي: 
_bannerAd.dispose () ;‏ 


اما الوحدة الاعلانية الثانية يمكن استدعائها عن طريق أحد الازرار لتظهر كما يلي: 


child: InkWell ( 
onTap: () { 
createlInterstitialAd () 
. .102d)( 


..Show() ; 


}, 





كذلك لا ننسى ان نضعها في الطريقة 0150056 كما يلي: 


_bannerAd.dispose () ; 





والان يكون الكود الكامل لكلا الوحدتين كما يلي: 


import 'package:flutter/material.dart' ; 


void main () => runApp (new MaterialApp ( 


))7 


class MyAppScreen extends StatefulWidget 
1 
Qdoverride 
State<StatefulWidget> createState() { 
// TODO: implement createState 
return new _MyAppScreen () ; 


} 


} 
class _MyAppScreen extends State<MyAppScreen> 


{ 
static final MobileAdTargetingInfo targeInfo=new 
MobileAdTargetingInfo ) 
textDevices:<String>[], 
keywords:<String> [ 'music', 'video', 'picture'], 
birthday:new DateTime. now () ; 
childDirected: true, 
(7; 


Qdoverride 


BannerAd _bannerAd; 
InterstitialAd 122625 11214 : 


BannerAd createBannarAd () { 
return new BannarAd ) 
adUnitId: BannerAd. testAdUnitId, 
size:AdSize.bannar, 
targetingInfo: targelInfo, 





يمكنك الحصول على شرح لكامل محتويات الكتاب على قناة ال ما ۷Y٥u†u‏ 


> StackOverFlow Arabi 


140 





listener: (MobileAdEvent event) 
{ 
print ("Bannar event :Ş$event") ; 
} 
); 
} 


InterstitialAd createInterstitialAd () { 
return new InterstitialAd ( 
adUnitId: InterstitialAd. testAdUnitId, 


targetingInfo: targelInfo, 
listener: (MobileAdEvent event) 


{ 


print ("Interstitial event :Ş$event") ; 


} 
(7; 
} 


void initState () { 
_bannerAd=createBannarAd () ..show () ; 
} 
dGoverride 
void dispose () 
{ 
_bannerAd.dispose () ; 
_üãinterstitialAd.dispose () ; 
} 
Goverride 
Widget build (BuildContext context) 1 
// TODO: implement build 
return new Scaffold (body: new Container ( 
child: InkWell ( 
onTap: () { 
createlnterstitialAd () 
. . 102d )( 
..Show() ; 


}, 
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ولكن يجب ان نعلم ان كل ما بنيناه هو لوحدات إعلانية تجريبية فيجب ان نضع رقم وحدتنا 
الصحيح التي انشأناها في حسابنا في 401701 وتوضع كما يلي: 





© و“‎ = App settings 
f Home App info 
Apps 2 
n lin 1 Wallfy n 
App name & store link © EE Not linked to Google Play 7 
Wallfy 
Android App ID @ 212121103 
A Î : 9 2 
(App overview | نا‎ link © Not linked LINK TO FIREBASE 
له‎ Ad units 
@ Blocking controls Ad serving settings 
[ع]‎ App settings Use location data for ads © 
Only for apps wîth location On 0 
permissions 
il. Reports 
1 it i 8 
E! EUEY APPIN No cap on interstitial impressions in this app / 
© Mediation 
qd: Campaigns 


Blocking controls 


0 


9 


Payments 


5 


Settings 


adUnitId: "ca-app-pub-4245565566455613/641455455455", 


الى هنا نكون قد اضفنا الإعلانات المطلوبة تبقى لدينا ان ننشر التطبيق في احد المتاجر. 
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نشر تطبيقات اندرويد 


متجر جgوجڻ)St0ore (Google Play‏ 
متجر جوجل (ع5605 2133 ع20081)) يمثل الآلية الرسمية لنشر تطبيقات الاندرويد .إن نشر 


تطبيقك على متجر جوجل يجعل من التطبيق قابل للتحميل والاستخدام من قبل المستخدمين 
في جميع أنحاء العالم .يمكن أيضا للمستخدمين إضافة تعليقات أو إعطاء تقييم للتطبيق بما 

يمكن من اكتشاف الأخطاء أو تحسين التطبيق لاحقا .كما يوفر متجر جوجل بعض الإحصائيات 

التي يمكن الاستفادة منها لقياس نجاح آي تطبيق. 


في هذه القسم سيتم شرح خطوات نشر التطبيق على متجر جوجل (ع5]05 1133 عاع3008)) 
يمكن تلخيص خطوات نشر التطبيق على متجر جوجل بما يلي: 
ع تصدير التطبيق (]01م:18) كملف من نوع APK (Andro1d Package)‏ . 
» عمل توقيع رقمي (ع51512]6111 1(151121) للتطبيق باستخدام شهادة (6101112216)) 
توقيع التطبيق رقميا. 
يساعد نظام اندرويد في تحديد هوية مالك التطبيق 
» رفع التطبيق على المتجر. 
»ه استخدام سوق اندرويد (]ع1/1311 6101010 ) لاستضافة وبيع التطبيق. 
في ما يلي سنقوم بشرح خطوات إعداد التطبيق للتوقيع ومن ثم سنقوم بشرح طريقة نشر 
التطبيق: 
» مراجعة ملف ال201؟.)د1/12211: 
راجع ملف بيان التطبيقات الافتراضي 42010101/13111651.:15721 الموجود في 
<app dir> / android / app / src / main‏ 
وتحقق من صحة القيم » وخصوصا: 
8) في الوسم 211636101 عدل الخاصة |10٥1‏ لتعكس الاسم النهائي للتطبيق. 
) إزالة إذنڻ andr .pمermıss10n.1N 1 £ERKN E1‏ إذا كان التطبيق الخاص بك لا 
يحتاج إلى الوصول إلى الإنترنت .يتضمن القالب القياسي هذه العلامة لتمكين 


الاتصال بين أدوات 1111161 والتطبيق الجاري تشغيله. 
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:1:111101 مراجعة ملف التكوين‎ ٠ 
راجع ملف إنشاء ملف 013016 الافتراضي الموجود في‎ 
<app dir> / android / app 
وتحقق من صحة القيم؛ وخصوصا:‎ 
في القسم 061211160012115 حدد معرف التطبيق 452721122610210 واسم وكود النسخة‎ 
كذلك حدد اصدار النظام الأدنى المقبول او اصدار‎ 7615105 0006 © 17615101 name 
.minSdkVersion & tar getŠSdKV erS101 جهاز الهدف للتطبيق‎ 


٠‏ آأضف ايقونة خاصة لتطبيقك: 
أي تطبيق جديد له ايقونة افتراضية وهي رمز فلاتر يمكنك تغيرها بأيقونتك الخاصة كما 
بعد اعداد ايقونتك بما تتناسب مع احجام الايقونات الخاصة بالاندرويد افتح المجلد 


<app dir>/android/app/src/main/res/mipmap- 


ثم ضع ايقونتك الخاصة. 
في الملف 113111651.:111 حدث القيمة حسب اسم ملف الايقونة الخاص بك كما يلي: 


"012 7_1ق10/ 420121032 <application android: icon="‏ 
اعد تشغيل تطبيقك لتتحقق من حقيقة استخدام ايقونتك الخاصة عوضا عن تلك 
الافتراضية. 
* انشاء المفتاح الخاص بتطبيقك ١١0)ءرء):‏ 


في حال عدم تملكك لمفتاح خاص بتطبيقك عليك ان تولد واحدا بالتعليمة التالية في 


.1111]]61 الكونسول الخاص ب‎ 
keytool -genkey -v -keystore ~/key.]jks -keyalg RSA - 





keysize 2048 -validity 10000 -allas key 


» ربط المفتاح من التطبيق: 
آنشئ ملفا اسمه 1.(.01061]165 في المسار التالي: 


<app dir>/android/key.properties 


storePassword=<password from previous step> 
keyPassword=<password from previous step> 


keyAlias=key 
storeFile=<location of the key store file, e.g. /Users/<user 
name>/key.jks> 
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مع العلم ان هذا الملف خاص بك وحدك ولا يجب ان يتطلع عليه الاخرون. 


» عمليات ضبط التسجيل: 
سنقوم الان في تعديلات شاملة في بعض الخصائص ٠‏ لنفتح الملف 511110.512016 
الموجود في المجلد: 


<app dir>/android/app/build. gradle 


بحيث نستبدل بعض التعليمات بتعليمات أخرى كما يلي: 


android { 


def keystoreProperties = new Properties )( 

def keystorePropertiesFile = 

rootProject.fl1le ('key.properties'") 

Lf (keystorePropertiesFile.exists()) { 
keystoreProperties.load (new 

FileInputStream (keystorePropertiesF'ile) ) 


} 


anû OLO 1 


buildTypes { 
release | 
7// TODO: . Add: YVOoUE own Signing config FOF thé 


release build. 

// Sioning with the debug Keys TOF NOW, S80 
` flutter run --release’ works. 

S10NLRNOCORNEILGT SLORINGCORELGS . debug 


51011-26518138: .1 
release { 
keyAllas keystoreProperties['keyAlias' ] 
keyPassword keystoreProperties['keyPassword' ] 
storeFlile file (keystoreProperties['storeFile'|) 
storePassword keystoreProperties['storePassword'" | 
} 
1 
21110176588 1 
release | 
signingConfig signingConfigs.release 


1 
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* تفعيل :Proguard J|‏ 
بالبداية ننشئ ملفا باسم 210511310-111165.010 في المسار التالي: 
/android/app/proguard-rules.pro‏ 
نضع فيه ما يلي: 


#Flutter Wrapper 
= KES 61283 161 111 و 7# |{ © تيزورم قمع‎ 
2 ل ا تزم م ع نالك لتيية 2 1388 6 ممه‎ 


KES6: CLASS TOCELULCLEEUETL. ® [f 
- مزممع]‎ CLASS LO. TIULCLEE.VTION.™ 1 
“KEG C1498 1O.TLULCTLEE ® 66م‎ } 
aE ‘Clas 161116 يله ع تدقع‎ 18 





0 2 5 2 2 
الاعدادات السابقة هى اعدادات أساسية لحماية مكتبات فلاتر الأساسية وأى مكتبة خارجية 


مضافة عليك إضافة قاعدتها الخاصة ضمن الملف ايضا. 


ثانيا لينا تفعيل ال 1210911210 في ملف ال 511110.512016 بحيث نضيف ونعدل بعض 
الاعدادات: 


android { 


bULLQATYEGEeS: 1 
release | 
SigningConfig.SLigningConfigs.Felease 


minifyEnabled true 
useProguard true 


prFoguaErdF1LLes 
GqEEDEFAULEPEOGUAEQFLLE (CT BEOGUAEd-“AaNQEOLI. EXE); 0م22"‎ 115 20- 
rules.pro' 


} 
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٠‏ تحرير التطبيق للنشر: 
استخدم سطر الأوامر كونسول الخاص ب1111]]615 لكتابة التعليمات التالية: 


1. cd <app dir> (replace <app dir> with your application’s directory). 
2. Run flutter build apk (flutter build defaults tO --release). 


التطبيق سيكون جاهزا في المسار: 


<app dir>/build/app/outputs/apk/release/app-release.apk 


يمكنك الحصول على شرح لكامل محتويات الكتاب على قناة ال ما ۷Y٥u†u‏ 
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رفع التطبيق: 
لكي تتمكن من رفع تطبيقك على متجر ©5101 16ع7008) يجب ان تملك حساب مطور وان يكون 
لديك جاهزا ما يلي: 
ه٠‏ ملف 621 الخاص بالتطبيق والذي تم توقيعه رقميا. 
۰ صر (501662510]5) توضح واجهات التطبيق ( صورتان على الأقل) 
٠‏ وصف مختصر للتطبيق ووظائفه. 


من الصفحة الرئيسية للمطور قم بالنقر على الرابط 4272110214105 101020 حيث ستظهر 
الصفحة في شكل والتي من خلالها يتم رفع ملف 87216 وكذلك ملفات الصور .يجب ايضا إدخال 
بعض البيانات الخاصة بالتطبيق مثل عنوان التطبيق» وصف له آخر التعديلات على التطبيق نوع 
التطبيق وتصنيفه. 


بعد نشر التطبيق على متجر جوجل» يمكن تتبع أي تعليقات يرسلها المستخدمون وكذلك آي 
أخطاء محتملة في التطبيق وعدد مرات تنزيله. 


يمكنك الحصول على شرح لكامل محتويات الكتاب على قناة ال 66ل أناه/ا 
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يمكنك الحصول على شرح لكامل محتويات الكتاب على قناة ال 66ل أناه/ا 
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لغة دارت هي لغة برمجية تم إنشاؤها من قبل شركة جوجل وتستخدم في تطبيقات الويب أو سطح المكتب وتطبيقات 
الجوال. تم ابتكار هذه اللغةة من قبل ع2823[1 1.215 و 111110 61 2572! وتم إطلاق أول اصدار منها في عام 1 201. 
من المهم أن نعلم أن :1031 هي لغةّ 21055-8131101121) أي أنها تعمل على مختلف المنصات.كما انها Native‏ 
Language‏ أي تتعامل مع العتاد مبشرة بدون مفسرات وسيطة وھذا یعطیھا سرعۃ عالیۃ جدا. Flutter رتllف la‏ 
فهي منصة تمكننا من بناء تطبيقات جوال بواجھات رسومیۃ معتمدین علی لغۃ ٣‏ ۵(. الذی یمیز i٣‏ ں۴ أنھا توکننا 
من بناء تطبيقات لأنظمة مختلفة منها الاندرويد أو ال 1005 الخاص باجهزة 577216 والمذهل أكثر أنه يمكن أيضا 
استخدامها كاللغة الأولى لبرمجة تطبيقات نظام جوجل الجديد 'فوشيا' 111012512 والذى قد يزيح الاندرويد عن مكانه. 
يجب أن نعلم أيضا أن 1111]:]61 تعتود في تصميميها 1051011 1/12161131 التي تم بناوؤها من قبل جوجل والتي 


تساعد في تصميم صفحات الويب. 


فيصل الاسود | وهندس برمجيات 

درست الاجازة في هندسة الحواسيب في جاوعةة حلب 
العريقة واكمل دراستي الدكتوراد مرورا بالماستر 

في جاوعة ۸¥ 5© الدولية للعلوم والتكنولوجيا. 

اتمنى لكم التوفيق 





